@layerでCSSの衝突を減らす。保守しやすいスタイル設計の進め方

はじめに

コンポーネントが増えてくると、あとから書いたCSSで意図せず上書きしてしまう問題が起きやすくなります。!important を足してしのぐ運用を続けると、どこから崩れるか読めなくなっていきます。

そんなときに効くのが @layer です。優先順位を「セレクタの強さ」ではなく「レイヤーの順序」で管理できるので、実装ルールをチームで共有しやすくなります。

機能やライブラリの概要

@layer は CSS Cascading and Inheritance Level 5 の機能で、スタイルを段階的に分類して扱えます。実務では reset, base, components, utilities のような層に分ける設計が扱いやすいです。

特に有効なのは、ユーティリティクラスとコンポーネントCSSが混在するプロジェクトです。どちらが勝つかを先に決められるので、レビュー時の判断が速くなります。

基本の使い方

最初にレイヤー順を明示し、その中に各スタイルを配置します。ここでは最小構成として base と components の2層で動かします。

HTML

HTML
<article class="card">
  <h2 class="card__title">レイヤー設計の最小例</h2>
  <p class="card__body">優先順位をセレクタ強度に頼らず整理できます。</p>
</article>

CSS

CSS
@layer base, components;

@layer base {
  .card__title {
    color: #334155;
  }
}

@layer components {
  .card__title {
    color: #0f172a;
  }
}

この例では components が後ろにあるため、.card__title の色は #0f172a になります。セレクタを強くしなくても、意図した優先順位を作れるのがポイントです。

便利な使いどころ

@layer は、デザインシステム運用や複数人開発で効果が出やすいです。リセット層と画面個別層を分離しておくと、後から入ったメンバーでも「どこに追記すべきか」を判断しやすくなります。

また、外部CSSを取り込む案件でも、ベンダーCSSを専用レイヤーへ分離することで予期しない上書きを減らせます。バグ調査時に確認範囲が狭くなるのも実務メリットです。

応用コード

次は、実務で使いやすい4層構成の例です。ここでは「reset」「base」「components」「utilities」の責務を明確に分けています。

HTML

HTML
<section class="profile-card">
  <h3 class="profile-card__title">運用ガイドライン</h3>
  <p class="profile-card__desc">優先順位の迷いを減らすため、レイヤー方針をチームで統一します。</p>
  <button class="btn u-bg-accent">保存する</button>
</section>

CSS

CSS
@layer reset, base, components, utilities;

@layer reset {
  * {
    box-sizing: border-box;
  }
}

@layer base {
  body {
    margin: 0;
    font-family: "Noto Sans JP", sans-serif;
    color: #0f172a;
  }

  .btn {
    border: 0;
    border-radius: 10px;
    padding: 10px 16px;
    background: #1e293b;
    color: #fff;
    cursor: pointer;
  }
}

@layer components {
  .profile-card {
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
  }

  .profile-card__title {
    margin: 0;
    font-size: 18px;
  }

  .btn {
    background: #0f172a;
  }
}

@layer utilities {
  .u-bg-accent {
    background: #0ea5e9;
  }
}

この構成では、最終的に .u-bg-accent が勝ちます。つまり「最後に調整したいルール」を utilities に寄せる設計が実現できます。

注意点

@layer を入れるだけでは品質は上がりません。どの層に何を書くかをチームで共有しないと、ただ層が増えただけになってしまいます。最初に短い運用ルールを作るのが有効です。

また、既存コードの全面移行は避けたほうが安全です。新規コンポーネントからレイヤー化し、問題がないことを確認しながら既存コードへ適用するとトラブルを減らせます。

まとめ

@layer は、CSSの優先順位を人間が理解しやすい形に戻してくれる機能です。セレクタ強度のいたちごっこを減らし、運用ルールを明文化しやすくなります。

小規模でも効果が出ますが、特に複数人開発や長期運用の案件で差が出やすいので、早めに採用方針を決めておくと安心です。

ポイント

  • 優先順位をセレクタ強度ではなくレイヤー順で制御できる
  • reset/base/components/utilities の分離は実務で扱いやすい
  • 全面移行より段階導入のほうが安全

参考リンク

read next