概要
CSSの新機能「カスケードレイヤー」がいよいよ主要ブラウザにサポートされました。
カスケードレイヤーを使うことで、CSSの詳細度とスタイルの順番をわかりやすく階層化することができます。
それに伴い、CSS設計が少し変わってきそうです。
本番環境に適当されるのは、まだまだ先だとは思いますが、
今回は「カスケードレイヤー」を使ったCSS設計について考えてみました。
というわけで、この記事では、僕が考えた「カスケードレイヤー」を使ったCSS設計について解説していこうと思います。
※ この記事では、カスケードレイヤーの使い方について解説しません。
下記のリンクでカスケードレイヤーの使い方について解説しています。
理想的なCSS設計とは
理想的なCSS設計とはなんでしょうか？
理想的なCSS設計は以下のような項目が挙げられます。
1. 予測しやすい
予測しやすいCSSとは、CSSの名前から、どこでどんなスタイルが当たるかがわかりやすいものです。
例えば、.c-form__textfield--errorというCSSの名前だったら
→ formの中にあるtextfieldにあたるError stateのスタイルであることがわかる。
2. 拡張性がある
拡張性があるCSSとは、開発している最中に、開発していない部分に何も影響を与えないものです。
例えば、ページごとに特有のスタイルを当てていたら
→ 1つのCSSを変更したことで、該当箇所以外の場所が変更されることがありません。
3. 保守性がある
保守性があるCSSとは、誰がCodeを見ても、何をしているのかがわかるものです。
例えば、1つのHTMLタグに1つのCSSを当てていたら
→誰が見てもそのタグのスタイルを変更しているCSSがわかる。
これらの項目を意識しながらCSS設計を行いました。
カスケードレイヤーを使ったCSS設計
では早速、僕が考えた「カスケードレイヤー」を使ったCSS設計について解説していきます
目的
「カスケードレイヤー」を使ったCSS設計の目的は、以下の通りです。
- カスケードレイヤーを使うことで、優先度を明示することで、保守性の向上
-
!importantを使わずにCSSを記述することで、拡張性の向上
基本方針
1. 基本設計はFLOCSSをベースにする
FLOCSSは、CSS設計手法のひとつで、OOCSS、SMACSS、BEM、MCSSなどの考え方のいいとこどりをした国産の設計手法です。
FLOCSSでは、UIパーツ・スタイルを以下のような階層で分類されます。
Foundation
→ reset.css / variable.css / mixin.css ...など
Layout
→ header.css / main.css / footer.css ...など
Object
┣ Component
┃ → button.css / form.css / media.css ...など
┣ Project
┃ → articles.css / card.css / profile.css ...など
┗ Utility
→ clearfix.css / margin.css / font.css ...など
2. 命名規則はMindBEMdingにする
MindBEMdingは、CSSの名前をBlock、 Element、 Modifierの3つに分けて名前をつける方法です。
-
Block（親要素）：サイトを構成するパーツ
- 例えば、ボタンやフォーム、カードといったUIパーツの親要素です。
-
Element（子孫要素）：Blockを構成するパーツ
- 例えば、ボタンの場合、テキストやアイコンといったボタンを構成する要素です。
-
Modifier（バリエーション）：BlockやElementのバリエーションや状態
- 例えば、ボタンの場合、色のちがいや不活性状態といった状態のことです.
さらにプレフィックスにFLOCSSの階層の頭文字を追加してあげるとさらに検索性アップします。
イメージはこんな感じです。
/*例） Componentのデフォルトボタンの親要素のスタイルを指定するとき*/
.c-button { }
/*例） Componentの青色ボタンのテキストのスタイルを指定するとき*/
.c-button__text--blue { }
/*例） Componentのボタンのテキストのスタイルを指定するとき*/
.c-button__text { }
カスケードレイヤーの使用方針
1. 基本１ファイルに１レイヤーを指定する。
サイトを構成するブロックごとにレイヤーを指定します。
また、FLOCSSの各階層ごとに、index.cssを指定することで、各階層の優先度を明確にします。
例えば、button.cssの場合
@layer button;
@layer button {
/* ここにスタイルを書いていく */
.c-button { }
}
例えば、componentのindex.cssでは
@layer component;
@layer component {
/* ここでCSSをインポートしていく */
@import(button.css) layer(button);
}
2. レイヤー名 = ファイル名 にする
予測しやすいようにレイヤー名とファイル名を同じにする。
例えば、componentのbutton.cssではlayer名をbuttonにする
@layer button;
@layer button {
/* ここにスタイルを書いていく */
.c-button { }
}
3. 無名レイヤーは基本使用しない。
無名レイヤーは、レイヤー内で指定されたスタイルより優先度が高いため、使いすぎると、階層構造がぐちゃぐちゃになる。また、レイヤーを明示することができない。
そのため、index.cssにインポートする時は、layerを指定してインポートする。
例えば、componentのindex.cssにbutton.cssをインポートする場合
@layer component;
@layer component {
@import(button.css) layer(button);
}
4. !importantは使わない
FLOCSSでは、Utilityのみで!importantを使うことを許可されているが、
「カスケードレイヤー」を使ったCSS設計では、!importantを使わない。
「カスケードレイヤー」を使ったCSS設計では、@layerで、Utilityの優先度を高く設定することで、
!importantを使わずにCSSを記述できる
Object内の優先度はこんな感じ
/* 優先度 低← --------------- →高 */
@layer component, Project, Utility;
その他の方針
その他の項目については、箇条書きで記載します。
- CSSでスタイルを当てる時id ・ タグセレクタは使わない
- ただし、reset.css や base.css等ではOK
- CSS名をつける時、単語の省略はなるべくしない
- projectの再利用は基本的に考えない
まとめ
この記事では、「カスケードレイヤー」を使ったCSS設計について解説してました。
このCSS設計でどこまで通用するかは、今後の運用次第なので敲きとして、捉えていただけたらと思います。
想像と、今までの経験から、こんな感じでいけそうだね程度なので、
「こっちの方がいい」や「こういう時どうする？」みたいなことがあれば
コメントいただきたいです。
なにかのご参考になればと思います。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。