CSSが増えてくると、後から書いたスタイルで上書きする、詳細度を強くする、最終的に!importantへ逃げる、という状態になりがちです。小さなサイトでは問題にならなくても、WordPressテーマや複数人で触るCSSでは保守コストが上がります。
そこで使いやすいのが@layerです。この記事では、CSS Cascade Layersを使って、テーマCSSを整理する基本方針と実装例をまとめます。
@layerで解決したいこと
- リセット、基本設定、レイアウト、コンポーネント、ユーティリティの優先順位を明示する
- セレクタの詳細度を無理に上げずに上書き順を管理する
- 後から追加したCSSが意図せず全体へ勝つ状態を減らす
- WordPressテーマのCSSを読みやすい単位に分ける
基本構成
最初にレイヤーの順番を宣言します。通常のスタイルでは、後に宣言したレイヤーほど優先されます。実務では、最初に順番だけ決めておくと管理しやすくなります。
@layer reset, base, layout, components, utilities;
@layer reset {
*,
*::before,
*::after {
box-sizing: border-box;
}
body,
h1,
h2,
p {
margin: 0;
}
}
@layer base {
:root {
--color-text: #111827;
--color-bg: #ffffff;
--color-line: #d1d5db;
--color-accent: #00a3ff;
--space-4: 1rem;
--space-6: 1.5rem;
}
body {
background: var(--color-bg);
color: var(--color-text);
font-family: system-ui, sans-serif;
line-height: 1.7;
}
}
@layer layout {
.post-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
gap: var(--space-6);
}
}
@layer components {
.article-card {
display: grid;
gap: var(--space-4);
padding: var(--space-6);
border: 1px solid var(--color-line);
border-radius: 8px;
background: var(--color-bg);
}
.article-card__tag {
color: var(--color-accent);
font-size: 0.875rem;
font-weight: 700;
}
}
@layer utilities {
.u-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
}WordPressテーマで使う場合の分け方
reset：box-sizingやmarginの初期化base：文字、背景、CSS変数、リンクなどの基本設定layout：グリッド、セクション、コンテナ幅components：記事カード、ボタン、ナビ、CTAutilities：非表示クラス、余白調整、補助クラス
注意点
@layerは便利ですが、すべてのCSSを無理に分ける必要はありません。まずはテーマ全体の土台になるCSSだけに使い、記事個別の小さなCSSや一時的な調整までレイヤー化しすぎない方が運用しやすいです。
あわせて読みたい
参考資料
まとめ
CSSの@layerは、詳細度で無理に勝つための機能ではなく、CSS全体の優先順位を設計するための機能です。WordPressテーマのようにCSSが増えやすい環境では、最初にレイヤー構成を決めておくと、後からの修正がかなり楽になります。
