CSSネスト×BEM×FLOCSS対応コーディングガイド

SSネスト（CSS Nesting Module）は、2023年以降モダンブラウザに標準実装され、SCSSなしでも構造的にスタイルを記述できるようになりました。本記事では、このCSSネストを活用しながら、BEM命名とFLOCSS構成で設計するベストプラクティスを紹介します。

✅ CSSネストとは？

CSSネストとは、親セレクタの中に子セレクタを入れ子構造で記述できる新機能です。

🎯 例（ネスト前）

.card__title {
  font-size: 1.2rem;
}
.card--large {
  padding: 2rem;
}

✅ ネスト構文での記述

.card {
  &__title {
    font-size: 1.2rem;
  }
  &--large {
    padding: 2rem;
  }
}

🔍 & はなぜ必要？

& は「現在のセレクタ（親）」を参照する記号です。

• &__title → .card__title（BEM記法のElement）
• &--large → .card--large（BEM記法のModifier）

🔸 このように、BEM命名とネストを正しく組み合わせるために & は必須です。
仮に .card__title とだけ書くと、.card .card__title という子孫セレクタになってしまいます。

📁 FLOCSS形式のディレクトリ構成

/css/
├── foundation/     // 初期設定や変数
├── layout/         // レイアウト単位（header/footer等）
├── object/
│   ├── component/  // 汎用UIパーツ（button/cardなど）
│   ├── project/    // 特定ページのスタイル
│   └── utility/    // 汎用ユーティリティ
└── style.css       // 全体をまとめる

各カテゴリごとに役割を分けておくことで、中長期でも破綻しにくいCSS構造が作れます。

🧱 BEM + CSSネスト 実装例

.card {
  display: flex;
  padding: 1rem;
  background: #fff;

  &__title {
    font-size: 1.2rem;
    font-weight: bold;
  }

  &__description {
    font-size: 1rem;
    color: #666;
  }

  &--large {
    padding: 2rem;
  }

  @media (width > 768px) {
    flex-direction: row;
  }
}

🪄 CSSプロパティの記述順（推奨）

1. 表示系：display, position, z-index
2. ボックス系：margin, padding, width, height
3. 背景・ボーダー系：background, border, box-shadow
4. テキスト系：font, color, text-align
5. 動き系：transition, animation, transform

.button {
  display: inline-flex;
  justify-content: center;
  width: 160px;
  height: 48px;
  background: #0070f3;
  color: #fff;
  font-size: 16px;
  border: none;
  transition: background 0.3s;

  &:hover {
    background: #005bd1;
  }
}

📱 メディアクエリのネスト

.container {
  padding: 1rem;

  @media (width > 1024px) {
    padding: 2rem;
  }
}

ネスト内に記述できるので、CSSが分散しないのが大きな利点です。

🧩 ユーティリティクラスの設計

ユーティリティは u- プレフィックスで機能を明示します。

.u-mb16 {
  margin-bottom: 16px;
}

.u-text-center {
  text-align: center;
}

📝 コメントルール

/* ----------------------------------------
  Component: Button
---------------------------------------- */

→ ファイル単位・セクション単位で明確に残すと、保守しやすくなります。

🚫 注意点・禁止ルール

🎯 まとめ

📣 最後に

CSS設計は未来の自分や他人が触っても迷わないための投資です。
CSSネスト × BEM × FLOCSS を活用すれば、軽量で効率的なスタイル設計が可能になります。
SCSSを使わずに、構造的で再利用しやすいCSSを書いていきましょう！

関連記事

BEM・OOCSS・SMACSS・FLOCSSの違いと使い方