バックエンドエンジニアが学ぶCSSのお作法 ～CSSのプロパティを書く順番～
Created at
WEB開発の現場においてバックエンドエンジニアでもCSSは最低限求められることは少なくないのではないか。求人情報を見てもスキルセットに最低限のHTML・CSSの知識と明記されている求人を見かける。バックエンドエンジニアでもTailwind CSSやBootstrapなどフレームワークを利用し、それらに則ったコーディングをすることでCSSについて深く学ぶことはしなくても、デザイナーやフロントエンドエンジニアの様にCSSのお作法を気にしなくてもシンプルかつ効率良くスタイリングすることは可能であるが、デザインの都合上CSSを書く必要がある場合もあるかもしれない。 そんな中でこのブログのCSSを書きながら疑問に思った今までなんとなくで理解していたこと。CSSのプロパティを書く順番について今回は学んでいく。
CSSのプロパティを書く順番とは？
ここで言うCSSプロパティを書く順とは以下の例を用いるとwidthが先かfont-sizeが先かということであり、 論理的にどんな順番で書けば大量のプロパティの記述があったときに効率よく行を見つけれらるのかという話だ。
.fooo {
width: 100%;
font-size: 16px;
}
.hoge {
font-size: 16px;
width: 100%;
}
ちなみに私がなんとなく理解していたのはwidthが先でfont-sizeが後だ。 根拠はというと？？なんとなくwidthの方が視覚的に大きいから。
結論
- アルファベット順 a-z
- 視覚順
の二つが代表的な書き順であるようだ。
書き順
１．アルファベット順
.foo {
align-items: center;
background-color: #333;
color: #fff;
display: block;
height: auto;
text-align: center;
width: 100%;
}
ポイント
- a～zのアルファベット順に書けばOK✅
- Googleでも推奨されている書き方✅
- 論理的に誰が書いても同じ順番になり、探しているプロパティが探しやすくなる✅
2．視覚順
.foo {
align-items: center;
background-color: #333;
color: #fff;
display: block;
height: auto;
text-align: center;
width: 100%;
}
ポイント
- 視覚的に認識する順番（参考を参照）に書けばＯＫ✅
- 隣接するプロパティの関連性からどんなスタイリングなのか推測ができる✅
- 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
まとめ
- 書き順には大きく分けて、アルファベット順と視覚順の２つがある
- アルファベット順には誰が書いても同じ順番になり探しやすいというメリットがある
- 視覚順には隣接するプロパティの関連性からどんなスタイリングなのか推測しやすいというメリットがある
- アルファベット順はGoogleが推奨している
所感
アルファベット順で VSCODEの拡張機能を検索してみるとCSSCombなど自動で並び替えをしてくれるものが存在する。 プロジェクトにルールに従うことが前提ではあるが、 個人的にでもCSSを書く機会があればこういった便利な機能を使って人的ミスをなくし、保守性のあるマークアップをしていきたい。