CSSの書き方の順番で悩まない！スタイルルールのすすめ

Webサイトを作成していて、CSSを書き足していくうちに「このプロパティはどこに書いたっけ？」「コードがごちゃごちゃして読みにくい」と感じた経験はありませんか？

CSSは自由度が高いため、書き方の順番にルールがないとコードが乱雑になりやすいという特徴があります。

読みやすく、保守しやすいCSSにするためには、プロパティを書く順番を統一することが重要です。

この記事では、初心者からプロまで実践できる内容として以下を解説します。

CSSプロパティの書き方順番を統一するメリット
業界標準とされるおすすめの順番
実際のコード例と比較
チーム開発で使われるスタイルガイド
自動整形ツールの活用方法

CSSプロパティのおすすめの書く順番
1. 基本的な考え方
2. 詳細な順番
実際のコード例で比較
チーム開発で使われるスタイルガイド
1. 主要なスタイルガイド
2. 自動整形ツールの活用
プロジェクト規模別の推奨アプローチ
よくある質問と解決方法
まとめ

CSSプロパティのおすすめの書く順番

基本的な考え方

一般的に推奨されているのは、レイアウト → サイズ → 装飾 → その他の順番です。

これは「大きな構造を決めるもの」から「細かな見た目の調整」まで、論理的な流れに沿って書く方法です。

詳細な順番

1. 表示形式・位置関連

要素の基本的な配置や表示方法を決めるプロパティです。

display
position
top, right, bottom, left
float
clear
z-index

2. ボックスモデル関連

要素のサイズや余白を定義するプロパティです。

width, height
max-width, max-height
min-width, min-height
margin
padding
box-sizing

3. 背景・枠線関連

要素の視覚的な枠組みを決めるプロパティです。

background
border
border-radius
box-shadow
outline

4. テキスト・フォント関連

文字に関する設定を行うプロパティです。

color
font-family
font-size
font-weight
line-height
text-align
text-decoration
white-space

5. その他・演出関連

アニメーションやカスタムプロパティなど、特殊な効果を加えるプロパティです。

transition
animation
transform
cursor
opacity
visibility

実際のコード例で比較

悪い例：順番がバラバラなCSS

.button {
  color: white;
  position: relative;
  font-size: 16px;
  background: #4caf50;
  width: 200px;
  transition: background 0.3s;
  display: inline-block;
  border: 1px solid #388e3c;
  text-align: center;
  padding: 10px 20px;
  border-radius: 4px;
  margin: 0 auto;
}

この例では、プロパティがランダムに配置されており、どこに何が書いてあるかすぐに把握できません。

良い例：順番を統一したCSS

.button {
  /* 表示形式・位置 */
  display: inline-block;
  position: relative;
  
  /* ボックスモデル */
  width: 200px;
  padding: 10px 20px;
  margin: 0 auto;
  
  /* 背景・枠線 */
  background: #4caf50;
  border: 1px solid #388e3c;
  border-radius: 4px;
  
  /* テキスト */
  color: white;
  font-size: 16px;
  text-align: center;
  
  /* その他 */
  transition: background 0.3s;
}

.button:hover {
  background: #45a049;
}

このように一貫した順番で書くことで、各セクションの役割が明確になり、保守性が大幅に向上します。

複雑なレイアウトの例

.card-container {
  /* 表示形式・位置 */
  display: flex;
  flex-direction: column;
  position: relative;
  
  /* ボックスモデル */
  width: 100%;
  max-width: 400px;
  height: auto;
  margin: 20px auto;
  padding: 20px;
  
  /* 背景・枠線 */
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  
  /* テキスト */
  color: #333333;
  font-family: 'Arial', sans-serif;
  
  /* その他 */
  transition: box-shadow 0.3s ease;
  cursor: pointer;
}

チーム開発で使われるスタイルガイド

主要なスタイルガイド

SMACSS（Scalable and Modular Architecture for CSS）

構造やモジュール単位でスタイルを整理する手法です。

特徴

ベース、レイアウト、モジュール、状態、テーマの5カテゴリーで分類
大規模プロジェクトでのCSS管理に適している
プロパティの記述順序も定義されている

BEM（Block Element Modifier）

クラス名を「Block__Element–Modifier」の形式で統一する手法です。

記述例

.card { /* Block */ }
.card__title { /* Element */ }
.card--featured { /* Modifier */ }

CSS Property Order

Mozilla、Google、Airbnbなどのテックカンパニーが採用している順序規則です。

Mozilla スタイルガイド例

.example {
  /* Positioning */
  position: relative;
  top: 0;
  right: 0;
  
  /* Display & Box Model */
  display: block;
  width: 100px;
  height: 100px;
  
  /* Other */
  background: #000;
  color: #fff;
}

自動整形ツールの活用

Prettier

コードの自動整形を行うツールです。

設定例（.prettierrc）

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 80
}

Stylelint

CSSの構文チェックとプロパティ順序の自動整列を行います。

設定例（.stylelintrc.json）

{
  "extends": ["stylelint-config-standard"],
  "rules": {
    "order/properties-alphabetical-order": true,
    "declaration-block-semicolon-newline-after": "always"
  }
}

VSCode拡張機能

Stylelint: リアルタイムでCSSの問題を検出
CSS Peek: クラス名から定義箇所にジャンプ
IntelliSense for CSS: CSSプロパティの自動補完

プロジェクト規模別の推奨アプローチ

小規模プロジェクト（個人開発）

基本的な順番ルールを守り、シンプルな構成を心がけます。

/* シンプルな順番ルール */
.component {
  /* レイアウト */
  display: block;
  
  /* サイズ */
  width: 100%;
  
  /* 装飾 */
  background: #fff;
  
  /* テキスト */
  color: #333;
}

中規模プロジェクト（チーム開発）

スタイルガイドを導入し、自動整形ツールを活用します。

package.json設定例

{
  "scripts": {
    "lint:css": "stylelint 'src/**/*.css'",
    "format:css": "prettier --write 'src/**/*.css'"
  }
}

大規模プロジェクト（エンタープライズ）

包括的なCSS設計手法とツールチェーンを構築します。

CSS-in-JSライブラリの採用
ビルドプロセスでの自動最適化
デザインシステムとの連携

よくある質問と解決方法

プロパティの順番を覚えられない場合

解決方法

エディタの拡張機能を使用して自動整列
チートシートを作成して手元に置く
段階的に慣れていく（まずは大きなカテゴリーから）

既存プロジェクトに導入する場合

手順

現状のコードを分析
チーム内でルールを合意
段階的に適用（新しいコードから）
自動整形ツールで一括変換

パフォーマンスへの影響

CSSプロパティの記述順序は、ブラウザの描画パフォーマンスには基本的に影響しません。ただし、読みやすさが向上することで、間接的に開発効率とコード品質が向上します。

まとめ

CSSプロパティの書く順番を統一することで、以下のメリットが得られます。

開発効率の向上

コードの見通しがよくなり、保守性が向上
デバッグ時間の短縮
新機能追加時の作業効率アップ

チーム開発の最適化

コードレビューの効率化
新メンバーの学習コスト削減
プロジェクト全体の品質向上

推奨する順番

表示形式・位置関連
ボックスモデル関連
背景・枠線関連
テキスト・フォント関連
その他・演出関連