CSSを書いていて、「なんとなく書いたけど、あとから見返したらすごく読みにくい…」と感じたことはありませんか？
プロパティの順序を意識するだけで、CSSは見やすく、ミスの少ないコードになります。
この記事では、CSSのプロパティの並べ方に関する考え方や、おすすめのルールをご紹介します。
HTMLとJavaScriptの命名ルールと属性の順番については以下の記事で解説してます。
-
【備忘録】HTMLとJavaScriptの命名ルールと属性の順番【現役エンジニアの実例】
もくじ命名規則の基本方針命名ルールの基本的な考え方HTMLにおけるidとclassの命名ルールid と class の違いと使い分けおすすめの命名ルールよくあるNG例よく混同される他のスタイルとの違い ...
CSSのプロパティ順序が重要な理由
CSSは自由度が高いため、同じ見た目でもさまざまな書き方が可能です。
しかし、以下のような理由からプロパティの順序を統一することが推奨されます。
| 可読性の向上 | 同じルールで書かれていれば、他人のコードも理解しやすくなります。 |
|---|---|
| 保守性の向上 | プロパティを探しやすく、修正漏れを防ぐことができます。 |
| チーム開発での統一感 | 誰が書いても同じようなコードに見えるため、レビューの負担が減ります。 |
| 意図しない上書きの防止 | 順序を明確にすることで、依存関係のあるプロパティの誤上書きを防ぐことができます。 |
プロパティの並び順のルール（パターン紹介）
3つのプロパティの並び順ルールを紹介しますが、私は「グループ分類順」を採用してます。
理由は、派遣やフリーランスエンジニアを通して様々なプロジェクトに参画してきましたが、全てのプロジェクトでグループ分類順が採用されていたためです。
1. グループ分類順
もっともよく使われる方法で、プロパティの種類によってグループ分けして並べます。
以下は私自身が使用しているものです。
/* 1. レイアウト・表示モード */ display flex flex-grow flex-shrink flex-basis flex-direction flex-wrap justify-content align-items align-content align-self order grid grid-template-columns grid-template-rows grid-area place-items gap visibility position z-index top right bottom left inset float clear /* 2. ボックスサイズとスペーシング（ボックスモデル） */ box-sizing width min-width max-width height min-height max-height margin margin-top margin-right margin-bottom margin-left padding padding-top padding-right padding-bottom padding-left /* 3. スクロール・オーバーフロー・表示領域 */ overflow overflow-x overflow-y clip resize /* 4. タイポグラフィ（文字周り） */ font font-family font-size font-weight font-style font-variant line-height letter-spacing word-spacing text-align text-indent text-transform text-decoration text-overflow white-space vertical-align color direction /* 5. リストスタイル */ list-style list-style-type list-style-position list-style-image /* 6. 背景とボーダー（ビジュアルデザイン）*/ background background-color background-image background-position background-size background-repeat background-attachment border border-width border-style border-color border-top border-right border-bottom border-left border-radius box-shadow outline outline-width outline-style outline-color outline-offset /* 7. テーブル */ table-layout border-collapse border-spacing caption-side empty-cells /* 8. エフェクト・アニメーション・変形 */ opacity transition transition-property transition-duration transition-timing-function transition-delay animation animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction transform transform-origin filter /* 9. インタラクション系（ユーザー操作） */ cursor pointer-events user-select touch-action caret-color scroll-behavior will-change /* 10. その他の特殊プロパティ */ content quotes counter-reset counter-increment appearance visibility backface-visibility mix-blend-mode isolation
2. アルファベット順
Googleが推奨している、A→Z順に並べる方法です。
メリット：ツールで機械的に並び替えができる、誰が書いても同じ順番になる、プロパティを探しやすくなる
デメリット：意味的なつながりが見えにくい、可読性が低くなる
.selector {
background: #eee;
border: 1px solid #ccc;
color: #333;
display: block;
margin: 20px;
padding: 10px;
}
3. 独自ルールの作成
「グループ分類順＋よく使うプロパティ優先」など、自分やチームに合わせたカスタム順序を作成します。
独自ルールの作成するうえで大切なのは一貫性です。
まとめ
CSSのプロパティ順序は、地味ながらコードの品質を大きく左右する要素です。
- 順序を統一すれば読みやすく、メンテナンスも楽になる
- 一貫性のあるルールを決めて、チームで共有しよう
Prettierなどツールを導入することで、アルファベット順などにソートすることも可能です。
まずは小さなルールから導入してみて、自分に合った書き方を見つけてください！
HTMLとJavaScriptの命名ルールと属性の順番については以下の記事で解説してます。
-
【備忘録】HTMLとJavaScriptの命名ルールと属性の順番【現役エンジニアの実例】
もくじ命名規則の基本方針命名ルールの基本的な考え方HTMLにおけるidとclassの命名ルールid と class の違いと使い分けおすすめの命名ルールよくあるNG例よく混同される他のスタイルとの違い ...