CSS プロパティの並び順はどうするべきでしょうか?

2021年9月29日
ユーザー

コード模写を行なっていく中で、よくモヤモヤしています。
ネットで調べたところ、以下の解説を見つけました。

  • アルファベット順
    → Google が「 Google HTML/CSS Style Guide 」で提唱したもので、順番が世界の共通ルール・・・とのことで、ネット上で推奨されている向きもあるようですが、

一方で、

  • 視覚順・役割順
    → Mozila が「 mozilla.org Base Styles 」で、
      W3C が「 CSS2 Specification 」で提唱 したもので、
      ボックスモデル→色→フォント→その他の順・・・で書いていく、というものもある

自分は「視覚順・役割順」の方が、実際にマークアップしていく中で整理しやすいので好みなのですが、
コード模写を行なっていく中で、ソースコードをチェックすると「ん~。。。」と思えてしまうような記述順があります。

 例)「 display 」タグや「 position 」タグを先頭にもって来て、
 その後に「サイズ」「色」「フォント」「余白」・・・のようにしたいのに、
 ソースコードでは「 position 」が一番最後に書かれている

今後、実際にプログラミング案件が受注できた際に、都度クライアントにプロパティの順番を確認するのがベストなのでしょうか?
(協業ならば、そこでのルールに従えば OK だと思うのですが)

アドバイス頂きたく存じます、何卒宜しくお願いいたします。

先生

こんにちは。ご質問ありがとうございました。

今後、実際にプログラミング案件が受注できた際に、都度クライアントにプロパティの順番を確認するのがベストなのでしょうか?
(協業ならば、そこでのルールに従えばOKだと思うのですが)

そうですね・・・。クライアントによってルールがあればそれに従うのが良いでしょう。

CSS の書き方については「これが唯一の正解」といったものはないので、現場のルールを優先しつつ、あとは本人にとって書きやすい、他の人にとって読みやすい、と思われる方法を採用すればよいかと思います。

以上、参考にしてみてください。

ユーザー

ご回答、有難うございます。

細かな制約(必ず先に書く、必ずセットで書く)などは無さそうなので、
少しホッとしました。

現場のルールを優先しつつ、あとは本人にとって書きやすい、他の人にとって読みやすい

を、しっかり念頭に置いて取り組んでいきたいと思います。
有難うございました。

この質問はユーザーによって解決済みになりました