LoginSignup
6

【CSS】カスケードレイヤーを使ったCSS設計

Last updated at Posted at 2022-05-26

概要

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パーツ・スタイルを以下のような階層で分類されます。

:file_folder: Foundation
 → reset.css / variable.css / mixin.css ...など
:file_folder: Layout
 → header.css / main.css / footer.css ...など
:file_folder: Object
  ┣ :file_folder: Component
  ┃ → button.css / form.css / media.css ...など
  ┣ :file_folder: Project
  ┃ → articles.css / card.css / profile.css ...など
  ┗ :file_folder: Utility
    → clearfix.css / margin.css / font.css ...など

2. 命名規則はMindBEMdingにする

MindBEMdingは、CSSの名前をBlockElementModifierの3つに分けて名前をつける方法です。

  • Block(親要素):サイトを構成するパーツ
    • 例えば、ボタンやフォーム、カードといったUIパーツの親要素です。
  • Element(子孫要素):Blockを構成するパーツ
    • 例えば、ボタンの場合、テキストやアイコンといったボタンを構成する要素です。
  • Modifier(バリエーション):BlockやElementのバリエーションや状態
    • 例えば、ボタンの場合、色のちがいや不活性状態といった状態のことです.

さらにプレフィックスにFLOCSSの階層の頭文字を追加してあげるとさらに検索性アップします。
イメージはこんな感じです。

/*例) Componentのデフォルトボタンの親要素のスタイルを指定するとき*/
.c-button { }

/*例) Componentの青色ボタンのテキストのスタイルを指定するとき*/
.c-button__text--blue { }

/*例) Componentのボタンのテキストのスタイルを指定するとき*/
.c-button__text { }

カスケードレイヤーの使用方針

1. 基本1ファイルに1レイヤーを指定する。

サイトを構成するブロックごとにレイヤーを指定します。
また、FLOCSSの各階層ごとに、index.cssを指定することで、各階層の優先度を明確にします。

例えば、button.cssの場合

button.css
@layer button;

@layer button {
  /* ここにスタイルを書いていく */
  .c-button { }
}

例えば、componentのindex.cssでは

component / index.css
@layer component;

@layer component {
  /* ここでCSSをインポートしていく */
  @import(button.css) layer(button);
}

2. レイヤー名 = ファイル名 にする

予測しやすいようにレイヤー名とファイル名を同じにする。

例えば、componentのbutton.cssではlayer名をbuttonにする

button.css
@layer button;

@layer button {
  /* ここにスタイルを書いていく */
  .c-button { }
}

3. 無名レイヤーは基本使用しない。

無名レイヤーは、レイヤー内で指定されたスタイルより優先度が高いため、使いすぎると、階層構造がぐちゃぐちゃになる。また、レイヤーを明示することができない。
そのため、index.cssにインポートする時は、layerを指定してインポートする。

例えば、componentのindex.cssにbutton.cssをインポートする場合

component / index.css
@layer component;

@layer component {
  @import(button.css) layer(button);
}

4. !importantは使わない

FLOCSSでは、Utilityのみで!importantを使うことを許可されているが、
カスケードレイヤー」を使ったCSS設計では、!importantを使わない。

カスケードレイヤー」を使ったCSS設計では、@layerで、Utilityの優先度を高く設定することで、
!importantを使わずにCSSを記述できる

Object内の優先度はこんな感じ

object / index.css
/* 優先度 低← --------------- →高 */
@layer component, Project, Utility;

その他の方針

その他の項目については、箇条書きで記載します。

  • CSSでスタイルを当てる時idタグセレクタは使わない
    • ただし、reset.css や base.css等ではOK
  • CSS名をつける時、単語の省略はなるべくしない
  • projectの再利用は基本的に考えない

まとめ

この記事では、「カスケードレイヤー」を使ったCSS設計について解説してました。

このCSS設計でどこまで通用するかは、今後の運用次第なので敲きとして、捉えていただけたらと思います。

想像と、今までの経験から、こんな感じでいけそうだね程度なので、
「こっちの方がいい」や「こういう時どうする?」みたいなことがあれば
コメントいただきたいです。

なにかのご参考になればと思います。


最後まで読んでくださってありがとうございます!
さらに詳しい内容を聞きたい方は、Devトークで直接お話しましょう!

X(Twitter)でも情報を発信しているので、良かったらフォローお願いします!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6