CSSのカスケードレイヤーが便利! 複数のCSSファイルを効率よく管理できるデフォルトのCSS構造 -CSS boilerplate

小規模のプロジェクトをはじめ、大規模のプロジェクトもサポートしたCSSのベースとなるテンプレートを紹介します。

大きな特徴は、@layerでCSSの構造を明確にし、リセットCSSやサードパーティのCSS、オリジナルのCSSなどのカスケードをより効率よく管理できることです。詳細度や!importantに頭を悩ますこともなくなります。

複数のCSSファイルを効率よく管理できるデフォルトのCSS構造 -CSS boilerplate

CSS boilerplate
CSS boilerplate -GitHub

CSS boilerplateの中身

まずは、CSS boilerplateの中身をご覧ください。

CSS boilerplateとは

CSSのボイラープレートとはHTMLのボイラープレートと同様に、すべてのプロジェクトで繰り返し使用できる定型のCSSです。人によっては単なるリセットCSSだったり、ベースとなるCSSだったり、場合によってはコンポーネントのスタイルなども含まれることがあります。

このCSS boilerplateは、それをさらに一歩進めたものです。
リセットCSSを使用し、定義済みのルールも付属していますが、重要なのはカスケードレイヤーを使用して構造を確立して、カスケードをより細かく制御できるようにしていることです。

CSSの@layerカスケードレイヤーは、2022年にすべてのブラウザにサポートされています。

参考:

CSSのカスケードレイヤー「@layer」の仕組みと基礎知識、さまざまな使用例を徹底解説

カスケードレイヤー「@layer」でCSSの実装がどう変わるのか、仕組みと基礎知識、さまざまな使用例を徹底解説

CSS boilerplateのCSSを解説

CSS boilerplateは主に、4つのレイヤーで構成されています。
coreレイヤーは、グローバルのカスタムプロパティとベーススタイルのためのレイヤーです。グローバルのカスタムスタイルとは、サイト全体で共有したいスタイルです。ベーススタイルとは、サイトのすべてのHTML要素または多くのHTML要素の適用するスタイルです。

グローバルのカスタムプロパティを専用のレイヤーに配置する必要はないことに注意してください。ベーススタイルも専用のレイヤーに配置する必要はありません。レイヤー化されていない場合、coreレイヤー内のレイヤー化されたスタイルを上書きします。そうすることで見た目がより整理され、coreレイヤーがより複雑になった場合にも管理しやすくなります。

third-partyレイヤーはbaseレイヤーを上書きし、サードパーティのスタイルを含みます。何かを上書きしたい場合はimportsサブレイヤーにインポートすることで、、overridesサブレイヤーやレイヤー化されていないスタイルを使用できます。

componentsレイヤーでは、ティーザーやナビゲーションやウィジェットなど、サイトで使用するCSSルールのほとんどを記述します。

CSSのルールをより多くのレイヤーにネストすることで、コンポーネントのバリエーションやさまざまな状態をより細かく制御できます。

バグを修正するためにCSSを追加するときがあると思います。そんな時は、componentsレイヤーに記述します。これらのレイヤー化されていないスタイルは、レイヤー化されたスタイルよりも詳細度が高くなり、最初に記述されたCSSと区別することができます。

utilityレイヤーは、ユーティリティのために予約されています。ユーティリティのclassは通常のスタイルの中でももっとも詳細度を高くしなければならないため、レイヤーの順序は最後になります。

CSS boilerplateの使い方

最低限必要なのは、レイヤーの順序を定義する最初の行です。小規模なプロジェクトであれば、これで十分です。
まずは、HTMLに外部スタイルシートとして記述します。

CSSは、下記のようになります。

大規模なプロジェクトの場合、おそらくスタイルを複数のファイルに分割する必要があると思います。index.cssファイルで順序を定義し、他のCSSファイルをインポートして使用します。

リセットCSSに使用しているUA+については、先日の記事をご覧ください。

アクセシビリティを重視した新時代のリセットCSS -UA+

アクセシビリティを重視した新時代のリセットCSS、ベースとなるより良いスタイルシートを求める人に最適 -UA+

index.cssに設定するのではなく、head内に設定することもできます。

大規模なプロジェクトでは、各コンポーネントファイルを個別にインポートするのではなく、ビルドステップで結合する必要がある場合があります。

sponsors

top of page

©2025 coliss