CSSプロパティに順序付けする習慣があることを知っているだろうか？width,heightやmargin,paddingなどのCSSプロパティのことなのだが、実はこれらには記述する順序が存在する。
順序といってもスタイルの優先順位の話ではない。あくまでコーダーが気をつけるべき程度のことなのだが、順序付けを講じたものとそうでないものでは、可読性の良し悪しが表れる。クオリティはもちろんのこと、その後の運用にも影響を及ぼすほどにだ。
たとえば目当てのプロパティを探すとき、順序付けで定められた辺りを確認すればよいものを、セレクタごとにバラけていたら大変効率が悪い。見付けづらいし、気持ち悪い。
CSSプロパティの順序付けを遵守しているマークアップエンジニアに発見されたら、間違いなく「きたねえCSSだ」と罵られるに違いない。
そういう事態にならないためにも、最低限のポイントは抑えておきたいものだ。
このエントリーでは、CSSプロパティの順序付けに言及している記事やサイトをいくつか紹介したい。
順序付けに言及している記事一覧
https://qiita.com/akuden/items/e9c91a7a2b0596d53fd1
CSS3のプロパティ順序も言及している。
- 視覚整形モデル（display,position,float etc…）
- 視覚効果（overflow,visibility etc…）
- ボックスモデル/テーブル（margin,padding,border etc…）
- 背景（background etc…）
- 画像（object-position etc…）
- 色（color etc…）
- フォント/テキスト（font,text-align etc…）
- マルチカラム（columns etc…）
- 生成コンテンツ、自動番号付け、リスト（list-style,quotes etc…）
- ユーザーインターフェイス（cursor,outline etc…）
- アニメーション（transition,animation etc…）
- 印刷
- 音声
https://9elements.com/css-rule-order/
sassの@extendや@mixin、その他clearfixにも言及している。
- SASS INHERITANCE（@extend,@mixin etc…）
- GENERATED CONTENT（content etc…）
- POSITION AND LAYOUT（position,float etc…）
- DISPLAY AND VISIBILITY（display,opacity etc…）
- CLIPPING（overflow etc…）
- ANIMATION（transition,animation etc…）
- BOX MODEL（margin,padding etc…）
- BACKGROUND（background,cursor etc…）
- TYPOGRAPHY（font,color,text-align etc…）
- PSEUDO-CLASSES & PSEUDO-ELEMENTS（:hover,:before,:after etc…）
https://github.com/necolas/idiomatic-css#declaration-order
「一貫性のあるCSSらしいCSSを書くための原則」というもので、記事そのものが素晴らしい。
- Positioning（position etc…）
- Display & Box Model（display,overflow etc…）
- Other（background,color,font etc…）
https://css-tricks.com/poll-results-how-do-you-order-your-css-properties/
順序付け分類のアンケート結果を示した上で、タイプ別順序付けに言及している。
- Positioning（position etc…）
- Display & Box Model（display,box-sizing etc…）
- Color（background,color etc…）
- Text（font,line-height etc…）
- Other（cursor etc…）
https://sass-guidelin.es/#declaration-sorting
タイプ別とアルファベット順について解説している。双方共に賛否両論があるという前置きしたうえで、タイプ別が理にかなっている旨の内容だ。さらに下記の「Concentric CSS」についても少し触れている。
https://rhodesmill.org/brandon/2011/concentric-css/
ボックスモデルの外から内に向かって整列する順序付けを提唱している。GitHubリポジトリで詳解されている。
まとめ
CSSプロパティの順序付けに言及している記事の紹介だった。いくつかご覧になったならば、それぞれに差異があることに気づいたかもしれない。つまり順序付けに決まりはないということだ。
紹介記事の「css-tricks」で順序付けタイプについてアンケートを載せている。それによると、やはりタイプ別に順序付けするケースが多い。面白いのが、行の長さで整列するというものだ。見た目の美しさを考慮してのことだと思う。
ともあれ私の結論は、「一貫性があれば、いかなるタイプの順序付けでもよい」というものだ。無思慮なものでなければよいわけだ。
私自身も「きたねえCSSだ」と罵られないよう今後も研鑽していきたい。