【CSS】CSSプロパティの記述順について考えてみた

こんにちは!
新米ライターのケインでございます。

前回の記事で予告した通り、今回は「CSSのプロパティ記述順」についてお話致します。

CSSプロパティ記述順の公式ルールは存在する?

CSSプロパティの記述順については、厳密に定義されたルールは存在しません。
ですが、推奨記述順に関するガイドラインというのは、FireFoxでおなじみMozilaさんの「mozilla.org Base Styles(※上部に記載されているSuggested orderの箇所)」や、W3Cさんの「CSS2 Specification」で掲載されているようです。

mozilla.org Base Stylesではどう推奨しているか??

Suggested order:(※Mozillaさんより抜粋)

  • display
  • list-style
  • position
  • float
  • clear
  • width
  • height
  • margin
  • padding
  • border
  • background
  • color
  • font
  • text-decoration
  • text-align
  • vertical-align
  • white-space
  • other text
  • content

イメージ的には下記の図のような感じですね!

mozilla.org Base Styles イメージ図解

cssプロパティ記述順のイメージ図

Googleやその他ではどう推奨しているか??

GoogleさんではGoogle Style Guideというものを出しており、こちらの中でCSSの記述順について取り上げられています。

Googleさんが推奨するのは「ABC順」で記載するというもの。

理由は「書く人によって記述順のばらつきがなくなる」というものでした。
うーん、確かに一理ある…。

他にも、色々な例がありましたので紹介させて頂きます。

CSSプロパティ記述順に関する参考記事・サイト

こうしてみても、御紹介した中でそう大差がないものもありますが、細かく見てみると色々なやり方があるものですねー!

筆者の見解

参考までに僕の見解も書かせて頂きますが…
僕も、今回の記事を書くにあたって色々調べてみて、色々と見直さないといけないなと、
あたふた直しているのが正直なところです。。笑

ですが、僕は基本的に一番最初に御紹介したMozillaさんのガイドライン派なので、それにほぼ準じる形でCSSを記載するように意識しています。(時々パニクって忘れます笑)

確かにGoogleさんの仰る「人によってばらつきがなくなるのでABC順で書くのが望ましい」っていうのも一理あるとは思うのですが、関連性の近いプロパティが離れて記載されていると、修正や調整をするときにやりにくいのではないか、ということで、僕はMozillaさんのガイドライン派なのです。

これは、最近脚光を浴びているCSS設計の世界にある「修正しやすいCSS」という観点に基づいた僕なりの考えでもあります。

多少ばらつきが出ることは確かにあるかもしれませんが、ある程度の根幹が決まっていれば、そう大きくずれることはないと思いますし、ガイドラインとして作っておけば、万が一それを他の人との作業で使用する際にも、共有すればいいだけですしね!

「ABC順で書かれていればどのあたりにプロパティが書かれているかわかるじゃん」って思う方もいるかもしれませんが、僕は実際にコーディングをするとなると、そう簡単にいくとはどうしても思えず…

まとめ

いかがでしたか?

もう既に自分のガイドラインを作っている方もいらっしゃるかもしれませんが、まだ特に作られていない方は、ぜひ自分なりの記述順ガイドラインを、上記の内容を参考にしながら作ってみてくださいね!

こういうガイドラインを作ることも、つまりは「作業の効率化(スピードアップ)」に繋がる(無駄な時間の削減)ことは間違いないわけです。

余談ですが、今月わたくし、特急のお仕事を連発で行っておりまして、それを通じて自身の作業の効率の悪さだったり、そういった課題をたくさん感じたのですが(もちろん発見もいろいろありました!)、それを糧にした記事をしばらくたくさん書けそうですので、楽しみにしていてください!笑

フォローして続編をチェック

@universionsをフォロー