CSSプロパティを書く順番

コーダーのhoshidaです。

CSSの描き順、コーダーによって色々個性があると思うのですが、何が最適なのでしょうか。ググると考察がいろいろ出てきます。

• 【CSS】CSSプロパティの記述順について考えてみた
  http://unitopi.com/css-order/
• CSS3も少し入れつつ自分流CSSプロパティの書き順を決めてみた
  http://weboook.blog22.fc2.com/blog-entry-351.html
• CSSプロパティ記述順序
  https://qiita.com/devmgn/items/6154ccd2e23b2e65c769

プロパティの記述順については、mozilla.org Base Stylesをベースとしているものが多いようです。

ちなみに、私の記述順は以下の通りです。

▼サイズ
height
width
margin
padding
▼テキスト装飾
color
font-size
font-weight
line-height
text-align
▼要素装飾
background
border
border-radius
box-sizing
▼配置・存在
float
position
display
▼アニメーション・UI
transition
opacity
cursor

※プロパティの分類は私の独自基準によるものです。

この記述方法を始めたのは、コーディング駆け出しのころ、CSSコーディングで最も頻度が多く重要な要素「width」「margin」などを最も目立つ上部に。効果が大きく段落ちなどのトラブルを招きやすい「float」「position」などを次に目立つ最下に配置したのがきっかけです。

そこから、要素を構成する際に「要素のサイズを決める→見た目を決める→位置を決める→動きを決める」という感覚的に自然な流れを上から順になぞる形でその他の順序が決まっていきました。

そのためものすごいこだわりがあるわけでもなく、何かより良い順序があれば調整しても良いかなと思っています。
冒頭のリンク先などでは、要素の表示方法や非表示を制御する「display」プロパティを上部に書いており、
それもなかなか合理的だななどとも思います。

記述順なんぞの細かいことにこだわる方の参考になれば幸いです。