CSSフォーマットが重要な理由

CSSはHTMLやJavaScriptに比べてチームでのルール策定が後回しになりがちですが、一貫したフォーマットがないとプロパティの重複・詳細度の競合・意図しないスタイルの上書きなどが起きやすくなります。

プロパティの推奨順序

プロパティの並び順に明確な正解はありませんが、以下のカテゴリ順に並べるのが一般的です。

  1. 配置：position・top・right・bottom・left・z-index
  2. ボックスモデル：display・width・height・margin・padding・border
  3. 背景：background・opacity
  4. テキスト：font・line-height・text-align・color
  5. アニメーション：transition・animation・transform

セレクタの設計

  • 詳細度（Specificity）を低く保つ。IDセレクタよりクラスセレクタを優先する
  • ネストは最大3段階まで
  • 要素セレクタとクラスを組み合わせない（例：div.boxは.boxに）

StylelintとPrettierの活用

# Stylelinのインストール
npm install --save-dev stylelint stylelint-config-standard

# .stylelintrc
{
  "extends": "stylelint-config-standard",
  "rules": {
    "properties-order": "alphabetical"
  }
}

BEM記法

Block・Element・Modifierの頭文字を取ったCSS命名規則。.block__element--modifierの形式で、セレクタの意味が明確になります。

.card {}
.card__title {}
.card__button {}
.card__button--disabled {}