CSSネスト完全ガイド｜基本構文からBEM×FLOCSS実践まで

CSSネスト（CSS Nesting Module）は、2023年以降モダンブラウザに標準実装され、SCSSなしでも構造的にスタイルを記述できるようになりました。本記事では、CSSネストの基本構文からSass/LESSとの違い、ブラウザ対応状況、そしてBEM命名とFLOCSS構成を組み合わせた実践的なコーディングガイドを紹介します。

CSSネストとは？基本構文を理解する

CSSネストとは、親セレクタの中に子セレクタを入れ子構造で記述できる新機能です。HTMLの階層構造と対応したスタイルルールを直感的に記述でき、コードの可読性や保守性が向上します。

従来、Sass（SCSS）やLessなどのCSSプリプロセッサで利用されていたネスト記法が、2023年からはネイティブCSSでも使用可能になりました。

基本的なネスト構文

ネスト記法の基本は、次のように要素を入れ子にするだけです。

.container {
  background: #f4f4f4;
  padding: 20px;

  .box {
    border: 1px solid #ccc;
    padding: 10px;

    p {
      color: #333;
      font-size: 16px;
    }
  }
}

疑似クラスや修飾セレクターの活用

現在のブラウザでは、基本的なネストには & は不要です。ただし、次のような場合には & が必要になります。

• 疑似クラス（:hover, :focus など）
• 状態クラス（.is-active など）の結合
• 疑似要素（::before, ::after）
• BEM記法でのElement・Modifier展開

.button {
  background-color: #0078ff;
  color: #fff;

  &.is-active {
    background-color: #005ecb;
  }

  &::after {
    content: " →";
  }

  &:hover {
    background-color: #005ecb;
  }
}

& はなぜ必要？

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

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

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

CSSネストとSass/LESSの違い

CSSネストはSassほどの柔軟性はないものの、シンプルな入れ子構造には十分対応でき、ビルド環境なしで使えるのが最大の利点です。

ブラウザ対応状況

CSSネストは2023年以降に主要ブラウザでサポートが進んでいます。

モダンブラウザのみを対象にするプロジェクトであれば、ネイティブCSSネストで十分です。古いブラウザをサポートする場合は、PostCSSなどのツールを併用してください。

BEM + CSSネスト 実装例

BEM命名とCSSネストを組み合わせると、コンポーネント単位で見通しの良いスタイルが書けます。

ネスト前（従来の書き方）

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

ネスト後（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;
  }
}

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

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

各カテゴリごとに役割を分けておくことで、中長期でも破綻しにくいCSS構造が作れます。CSSネストと組み合わせれば、各ファイル内でコンポーネントを自己完結的に管理できます。

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
---------------------------------------- */

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

注意点・禁止ルール

ネストは可読性を上げますが、3階層以上の深い入れ子は避けるのが原則です。セレクタの優先順位が過剰になり、保守性が下がります。

よくある質問

Q. SassのネストとネイティブCSSネストは何が違いますか？

構文が似ていますが、ネイティブでは必ずセレクタの直下に置くなどルールが異なります。@nest 記法や & の解釈も一部違うため、移行時は注意が必要です。

Q. どこまで深くネストして良い？

目安は2階層、最大でも3階層まで。深すぎるネストはSpecificityと依存が増え、後からの修正が困難になります。

Q. BEMとネストは相性が悪い？

いいえ、相性は良いです。.block { &__elem { … } &--mod { … } } のように、コンポーネント内に閉じたネストは読みやすさと再利用性を高めます。

Q. PostCSSやSassはまだ必要？

プロジェクトによります。モダンブラウザのみを対象にするならネイティブで十分です。IE対応や高度な変換が必要ならビルドツールの併用を検討してください。

まとめ

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

関連記事

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