「CSS設計完全ガイド」から学んだ効率的なCSS設計の手法

Web制作の学習が進んでくるにつれて、自分の書いているHTMLやCSSが分かりづらくて無駄が多いように感じるようになりました。

そんな時、多くの人がお勧めしている「CSS設計完全ガイド（著：半田惇志）」という参考書を見つけました。

本書はかなり分厚い（511ページ、、！）のですが、「よいCSSとはどんなものか」や「それを実現するための本質的な考え方」を理解できるので、これから長くWeb制作を仕事にしたいと考えている方にとって、とても役立つ内容になっています。

自分の備忘録と理解力向上のために、本書の概要を記録していくので、詳しい内容を知りたい方は、ぜひCSS完全設計ガイドを読んでみてください！

CSSの問題点

CSSはとても貧弱です。これはCSSの文法がシンプルで、少し学べば誰でも扱えるようになる、群を抜いた簡単さの弊害でもあります。

CSS設計完全ガイド（著：半田惇志）

ページ数が増えるとCSSもどんどん複雑になり、管理しきれなくなってくる

CSS設計完全ガイド（著：半田惇志）

CSSの仕様に対して、現在のWeb開発は複雑すぎる（もしくは単にCSSが壊れやすすぎる）

CSS設計完全ガイド（著：半田惇志）

CSS設計完全ガイドでは、ページ数が多かったり複雑な操作があったりするWebサイトで問題になりやすい、「CSSの管理の難しさを解決する方法」として「CSS設計」を紹介しています。

よいCSS設計を実現するためのポイント

「よいCSSとは何か」について、CSS設計完全ガイドでは、次の4点を満たしていることとしています。

・予測できる

・再利用できる

・保守できる

・拡張できる

CSS設計完全ガイド（著：半田惇志）

そして、「以上の4点を満たしたよいCSS」を実現するために、CSS設計を用います。

CSS設計には様々な手法がありますが、いずれの設計手法においても、必ず次の8つのポイントのどれかに該当する規則を持っています。

1.特性に応じてCSSを分類する

2.コンテンツとスタイリングが素結合である

3.影響範囲がみだりに広がりすぎない

4.特定のコンテキストにみだりに依存していない

5.詳細度がみだりに高くない

6.クラス名から影響範囲が想像できる

7.クラス名から見た目・機能・役割が想像できる

8.拡張しやすい

CSS設計完全ガイド（著：半田惇志）

以上の8つのポイントについて、もう少し具体的に書いていきます。

（本書を読み返したときに理解しやすいようにすることが目的のため、簡略的な記載になっています。詳しく知りたい方は、CSS設計完全ガイドを読んでみてください！）

CSS設計のポイント①：特性に応じてCSSを分類する

モジュール自体にはレイアウトに関する指定はしない

CSS設計完全ガイド（著：半田惇志）

これにより、「同じレイアウトに関する記述を何度も行う手間を省く」ことができる。

CSS設計のポイント②：コンテンツとスタイリングが素結合である

「要素型セレクターを使用しない」、つまり「HTMLとスタイリングの結びつきを弱める（＝＝疎結合にする）」

CSS設計完全ガイド（著：半田惇志）

これにより、「要素の変更によってスタイリングが適用されなくなるのを防ぐ」ことができる。

　属性セレクターの特定の値を使用してスタイリングすることも、基本的には避けるべき

CSS設計完全ガイド（著：半田惇志）

CSS設計のポイント③：影響範囲がみだりに広がりすぎない

・スコープを絞る（影響範囲を狭くする）

・影響範囲の広いCSSに含めるスタイリングは、なるべく最小限に留める

CSS設計完全ガイド（著：半田惇志）

「意味もなく影響範囲を広くすることでリスクが大きくなる」ことを意識する。

CSS設計のポイント④：特定のコンテキストにみだりに依存していない

コンテキストに依存していると何が問題かというと、ズバリ「コンテキストが変わったとたん、コードが動かなくなる」こと

CSS設計完全ガイド（著：半田惇志）

コンテキストとは、「場所や状況」のことです。

CSS設計のポイント⑤：詳細度がみだりに高くない

「セレクターはクラスセレクターを使用する」ことが基本

CSS設計完全ガイド（著：半田惇志）

IDセレクターは詳細度が高く、1ページで1回しか使えない制約があるため、スタイリング目的で利用しない。

また、HTMLにクラスが複数ついているからといって、セレクターにもそのままつける必要はない。（＝過不足ないクラスセレクターを選択する）

CSS設計のポイント⑥：クラス名から影響範囲が想像できる

モジュールの子要素には、モジュールのルート要素のクラス名を継承させる

CSS設計完全ガイド（著：半田惇志）

例えば、そのモジュール内のみでの使用を想定しているボタンには、「モジュール名-btn」とする。

CSS設計のポイント⑦：クラス名から見た目・機能・役割が想像できる

使い回しを前提としたモジュールに対する最適な命名とはつまり、

1.コンテキストではなく、見た目・機能・役割をベースとし

2.media・accordion・sliderなど、一般的な呼称を使用した

もの

CSS設計完全ガイド（著：半田惇志）

他サイトも参考にしながら、自分の引き出しを増やしていきたい。

CSS設計のポイント⑧：拡張しやすい

・拡張しやすいクラス設計を行う（マルチクラス設計を採用する）

・拡張用として作成したクラスは、機能・役割に応じて適切な粒度・影響範囲を保つ

CSS設計完全ガイド（著：半田惇志）

・モディファイア名から影響範囲（複数の要素を変更するのか、ひとつの範囲のみなのか）を予想できる

・ひとつのモディファイアはひとつの機能（または役割、変更）と過不足なく紐づいている

CSS設計完全ガイド（著：半田惇志）

モディファイアとは、「既存のクラスに対して何か変更を加える、上書きするためのクラス」のことです。

モディファイアが増えすぎると、かえって混乱を招くこともあるので注意が必要。

CSS設計の手法

CSS設計完全ガイドでは、実際の現場で使用されている「OOCSS」「SMACSS」「BEM」「PRECSS」の4つのCSS設計手法について紹介しています。

本書では、CSS設計の考え方を用いた実践的なコーディング方法も交えて、理解を深めやすいように解説されています。

詳しく知りたい方は、CSS設計完全ガイドを読んでみてください！

CSS設計手法①：OOCSS（オーオーシーエスエス）

OOCSSは、「Object Oriented CSS（オブジェクト指向CSS）」の略です。

その歴史はかなり古く、現在OOCSS単体でCSS設計を行うことはほとんどありませんが、のちに出てくる様々なCSS設計手法に、OOCSSの考え方が取り込まれています。

特徴としては大きく2つで、「ストラクチャーとスキンの分離」「コンテナとコンテンツの分離」が挙げられています。

それぞれ、良いCSSを実現するための8つのポイント「8.拡張しやすい」「4.特定のコンテキストにみだりに依存していない」に関連しています。

CSS設計手法②：SMACSS（スマックス）

SMACSSは、「Scalable and Modular Architecture for CSS（拡張可能でモジュール的なCSS設計）」の略です。

CSSのコードを役割に応じて、「ベース」「レイアウト」「モジュール」「状態（ステート）」「テーマ」の5つにカテゴリ分けしたのが特徴です。

SMACSSで提示されている規則はそこまで厳格ではないので、中規模以上のサイトである程度柔軟性を持って開発を進めたい場合に向いていると言えます。

CSS設計手法③：BEM（ベム）

BEMとは、「Block Element Modifier」の略です。

特徴は名前の通り、モジュールを「Block」「Element」「Modifier」の3つに分割して定義したことです。

BEMは、CSS設計完全ガイドを実際に読んでもらえばわかると思いますが、規則がとても多く、それぞれの規則が厳格に定められています。

特に、命名規則は、良いCSSを実現するための8つのポイント「6.クラス名から影響範囲が想像できる」と「7.クラス名から見た目・機能・役割が想像できる」に関連して厳格に定められています。

BEMの命名規則は、「クラス名が長くなり見づらいデメリット」もありますが、規則通りに実施することで、「比較的簡単に、誰が見ても分かりやすいクラス名をつけることができるメリット」があります。

個人的には、BEMの考え方が理解できていれば、小規模サイトの作成には問題なく立ち向かえると思っています。

BEMをもう少し詳しく

まずは、BEMのCSS設計を使えるようになることが重要だと考えたので、BEMについてCSS設計完全ガイドを読み込んだ内容をまとめます。

BEM

・要素型セレクターやIDセレクターは使用しない（→クラスセレクターを使用する）

・詳細度は均一にする

Block

・特定のコンテキストに依存せず、使いまわしができるもの

・「それが何であるか」を元に命名する

Element

・Blockを構成し、Blockの外では独立して使用できないもの（→必ずBlockクラスの中に配置する）

・Elementの中にElementがネストされた命名を使用できない

・「それが何であるか」を元に命名する

Modifier

・BlockやElementの見た目や状態、振る舞いを定義するもの（→必ずBlockかElementクラスの、2つ目以降のクラスとして配置する）

・「真偽値」と「キーと値のペア」の2種類がある

・「それがどうであるか」を元に命名する

Mix

・ひとつのHTML要素に、役割の異なる複数のクラスが付いている状態

MixとModifierの使い分け

・Mix

　レイアウト（他の要素との位置関係を調整する）に関係する変更

・Modifier

　レイアウトではなく、そのBlock（またはElement）内で完結する変更

BEMの標準の命名規則

・「block-name__elem-name_mod-name_mod-val」

・複数の単語はハイフンケース（-）で区切る

・Elementは、Blockの名前を継承し、アンダースコア2つを記述した後にElementの名前を付ける。

・Modifierは、Modifierを適用したいBlock（またはElement）の名前を継承し、アンダースコア１つを記述した後に、Modifierの名前を付ける。

・Modifierは、「キーと値のペア」の場合、キーと値をスネークケース（_）で区切る

BEMのその他の命名規則（MindBEMding）

・「block-name__element-name–mod-name(–val)」

・標準の命名規則との違いは、「Modifierの区切りがハイフン2つ」「Modifierのキーは省略可能」であること

・標準の命名規則よりもシンプルな記述ができる

CSS設計手法④：PRECSS（プレックス）

PRECSSは、「prefixed CSS（接頭辞付きのCSS）」の略で、CSS設計ガイドの筆者が開発しました。

名前の通り、「すべてのクラス名に役割に応じた2文字の接頭辞をつける」のが特徴で、CSSを「ベース」「レイアウト」「モジュール（ブロックモジュール、エレメントモジュール）」「ヘルパー」「ユニーク」「プログラム」の6つのグループに分類しています。

PRECSSでは、上記のグループ以外にも、プロジェクトに応じて柔軟に、接頭辞とともにオリジナルのグループを追加することができます。

まとめ

CSS設計完全ガイドでは、複雑になりがちなCSSの管理を簡単にするための様々な設計手法を、実例付きで学ぶことができます。

簡易的なテクニックではなく、本質的な考え方を身につけることができるので、時代に左右されにくいCSS設計を学びたいと考えている方におすすめの1冊です！