CSS設計を学ぼう！　デイトラWeb制作コース初級編Day25「CSS設計の基本概念からクラスの付け方をイメージしよう」

CSS設計って何？

CSS設計は、ウェブサイトを作るときに使うスタイル（見た目やレイアウト）を上手に整理する方法です。この設計をうまく行うと、ウェブサイトを簡単に変更できたり、同じデザインを違うページでも使い回したりできるようになります。具体的には、ルールに沿ってクラス名を付けたり、スタイルを小分けにして管理することが含まれます。

CSS設計はWeb開発において核となる役割を果たし、整理されていない設計だとプロジェクトの維持が困難になることがあります。効率的で管理しやすいCSSを作るためには、先人たちが体系化した設計手法を理解し、活用することが助けになります。

今回の学習で学んだ、CSSを効果的に設計するための基本原則と具体的な手法について解説していきます。

CSS設計の考え方

良いCSS設計の特徴は以下の四つに大別されます。それぞれの特徴を具体的に解説します。

１．予測しやすい

CSSのルールが明確であるため、他の開発者がコードを見た際に、どのスタイルがどのHTML要素に適用されるのかをすぐに理解できます。これは、クラス名やID、セレクタの命名規則に一貫性を持たせることで達成されます。例えば、「.btn」 がボタンに関連するスタイルであることは一目瞭然です。

２．再利用しやすい

コンポーネントベースの設計を取り入れることで、同じスタイルセットを異なるコンポーネントで効率良く使い回すことが可能です。これにより、コードの重複を避け、開発の速度を上げることができます。例えば、「.card 」クラスが複数のページやセクションで共通して用いられるスタイルを持つことが想定されます。

３．保守しやすい

小さな変更や修正が必要になったときに、他のスタイルに影響を与えることなく、最小限の労力で対応できるようにします。これは、CSSのカスケードや継承の特性を理解し、適切にスコープを設定することで実現します。スタイルシートの中で変数やミックスインを使用することも、保守性を高める手法の一つです。

４．拡張しやすい

新しい機能や要素を追加する際にも、既存のCSSコードを大きく書き換えることなく、容易にスタイルを拡張できるよう設計します。これは、モジュラー性と柔軟性を意識したクラスの管理により、新たなHTML要素に対して既存のスタイルを追加または変更することが容易になるためです。また、将来の変更や拡張を見越して、メディアクエリやフレームワークを用いたアプローチが効果的です。

おまけ　効率的ではないCSSの特徴

逆に良くないCSS設計の特徴は以下の通りです。

• HTMLの構造に依存してる… CSSがHTMLの構造に強く依存していると、HTMLの変更が直接CSSの修正を要求します。
• スタイルを取り消して再作成:…不要なスタイルを取り消すために余計なコードを書くのではなく、追加のみで済むよう設計します。
• 絶対値を使用している… 絶対値（例: width: 500px;）ではなく、相対値（例: width: 100%;）を使うことで、さまざまなデバイスや親要素のサイズ変更に柔軟に対応します。

CSSのカスケードと詳細度

CSSは”Cascading Style Sheets”の略で、スタイルがカスケード（滝のように階層的に流れる）のように適用されることから名付けられました。セレクタの詳細度によって、どのスタイルが優先されるかが決まります。

詳細度の種類

CSSセレクタの詳細度（スペシフィシティ）は、スタイルがどの要素に適用されるかを決める際にブラウザが使用するルールの優先順位です。詳細度の順位は上から下へ行くほど低くなり、高い詳細度を持つスタイルほど優先されます。以下に各セレクタの特徴を簡潔に説明します。

1. !important…これは「これ以上ないぞ！」と宣言するようなもので、他のすべての宣言よりも優先して適用される特別ルールです。ただし、乱用すると後でスタイルの管理が大変になります。
2. インラインスタイル: HTMLタグの中に直接書かれるスタイリングの方法で、「この要素だけ特別扱い」というときに使います。これはセレクタよりも高い優先度を持ちます。
   （例: <div style="color: red;">）。
3. IDセレクタ: これは「個人名刺」のようなもので、ページ内の特定の一つの要素にだけスタイルを適用するための非常に具体的な指示です。
   （例: #navbar）。
4. クラスセレクタ、属性セレクタ、疑似クラス: クラスは「部活のユニフォーム」のようなもので、同じクラス名を持つ要素に同じスタイルを適用します。属性セレクタは特定の属性を持つ要素にスタイルを適用し、疑似クラスは要素の特定の状態（例：マウスホバー）にスタイルを適用します。
   （例: .menu, [type="text"], :hover）。
5. 要素セレクタと疑似要素: 要素セレクタは「全員の制服」と考えられ、すべての該当するHTML要素にスタイルを適用します。疑似要素は要素の特定の部分（例：文字列の最初の行）にスタイルを適用します。
   （例: div, ::after）。
6. ユニバーサルセレクタ: これは「地球人全員」という意味で、ページ上のすべての要素に適用される非常に汎用的なセレクタです。最も低い詳細度を持ちます。（例: *）。

詳細度の計算方法

CSSセレクタの詳細度（Specificity）は、スタイルがどれだけ具体的な要素に適用されるかを数値で表します。詳細度が高いスタイルほど優先されます。詳細度は、以下の4種類のセレクタで計算されるポイントに基づいています。

1. インラインスタイル（1000点）
2. IDセレクタ（100点）
3. クラスセレクタ、属性セレクタ、疑似クラス（10点）
4. 要素セレクタ、疑似要素（1点）

以下のHTMLとCSSで詳細度の計算を考えます。

<div id="main" class="content">
  <p class="highlight">Hello, world!</p>
</div>

#main p {
  color: blue;
}

.content p {
  color: green;
}

p {
  color: red;
}

• #main p の詳細度は IDセレクタが1つ、要素セレクタが1つなので、100 + 1 = 101 点。
• .content p の詳細度は クラスセレクタが1つ、要素セレクタが1つなので、10 + 1 = 11 点。
• p の詳細度は 要素セレクタが1つなので、1 点。

この例では、#main p のスタイルが最も詳細度が高いため、このセレクタによるスタイル設定（テキスト色を青にする）が優先されます。そのため、 <p class=”highlight”> のテキストは青色になります。

なお、セレクタを組み合わせると詳細度が加算されます。例えば、 #main .highlight は 100 + 10 = 110 点になります。複数のクラス、ID、要素が組み合わさっている場合も同様に計算します。この計算方法を理解することで、CSSのスタイル競合を解決しやすくなり、意図したスタイリングを正確に適用できるようになります。

CSS設計手法

CSS設計の主な方法論として、OOCSS、BEM、SMACSSなどがあります。これらの設計手法は、Webサイトのスタイルシートが大きく複雑になるのを防ぎ、保守・運用を容易にするために考案されました。

以下、それぞれの設計手法について簡単に解説します。

OOCSS

OOCSS（Object-Oriented CSS）は、「オブジェクト指向CSS」とも呼ばれ、スタイルシートをより効率的に、再利用可能かつ拡張しやすい方法で管理するためのCSSの設計手法で、ページを構成する様々なパーツ（オブジェクト）を独立したコンポーネントとして定義し、それぞれに汎用的なスタイルを適用します。

具体的には、OOCSSでは2つの主要な原則に基づいています。

構造とスキンの分離

コンポーネントの基本的な構造（サイズやレイアウト）と外見（色や影など）を別々のスタイルルールとして定義します。これにより、同じ基本構造に異なる外見を簡単に適用できるようになります。

ボタンのスタイル定義で例えてみます。

<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>

/* 構造 */
.btn {
  padding: 10px 20px;
  border: none;
  font-size: 16px;
  cursor: pointer;
}

/* スキン */
.btn-primary {
  background-color: #007bff;
  color: white;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
}

この例では、.btn クラスがボタンの構造を定義（パディング、ボーダー、フォントサイズ、カーソルスタイル）し、.btn-primary と .btn-secondary クラスが異なる背景色とテキスト色を適用してボタンの「スキン」（外見）を定義しています。

今後コーディングしてくと、クラス名は違うけど重複するプロパティや値でCSSを書くケースが出てきます。そのような場合は共通化したクラスとして定義することで、コード量も少なくなり変更も簡単なクラスを作ることができるようになります。

コンテナとコンテンツの分離

この原則により、コンポーネントはどのようなコンテナ内に置かれても、そのスタイルが変わらないようにします。これは、スタイルをコンテナの影響から独立させ、再利用可能で汎用的なコンポーネントを作成することを可能にします。

以下にコードの例を挙げます。

<div class="sidebar">
  <div class="widget">
    <h2 class="widget-title">Sidebar Widget</h2>
    <p>This is a sidebar widget.</p>
  </div>
</div>

<div class="footer">
  <div class="widget">
    <h2 class="widget-title">Footer Widget</h2>
    <p>This is a footer widget.</p>
  </div>
</div>

/* ウィジェット構造 */
.widget {
  padding: 15px;
  margin: 10px;
  background: #f8f9fa;
}

.widget-title {
  font-size: 20px;
  color: #333;
}

/* コンテナスペシフィックスタイル（必要な場合のみ適用） */
.sidebar .widget {
  background: #e9ecef;
}

.footer .widget {
  background: #343a40;
  color: #ffffff;
}

この例では、.widget クラスがウィジェットの基本的な構造とスタイルを定義しており、どのコンテナ（.sidebar または .footer）に置かれてもその基本スタイルが維持されます。コンテナ固有のスタイルは、直接 .sidebar .widget や .footer .widget といったセレクタを用いて適用されていますが、これは必要な場合のみ行います。

BEM

BEM（Block Element Modifier）は、ウェブサイトのCSSをより効率的に管理するための命名規則です。この方法は、スタイルシートの再利用性を高め、保守を容易にします。

具体的には、BEMは以下の三つの主要なパーツから構成されます。

Block（ブロック）

ブロックは、単独で機能する再利用可能なUI（ユーザーインターフェース）の部品（コンポーネント）を指します。例えば、ヘッダー、フッター、メインナビゲーションなどがブロックにあたります。
ブロック名は意味のある名称を使用し、キャメルケース（単語の最初の文字を大文字で始める表記法、例: CamelCase）やスネークケース（単語をアンダースコアでつなぐ表記法、例: snake_case）ではなく、ケバブケース（全て小文字で単語の間にハイフンを入れる表記法、例: kebab-case）を使用します。
例: header, footer, main-navigation。

Element（エレメント）

エレメントは、ブロック内の部分的な構成要素です。ブロックに対して意味を持ち、ブロック内で特定の役割を果たします。エレメント名はブロック名に二重のアンダースコア「__」を使って連結され、その後にエレメントの名称が続きます。
例: header__logo, footer__link。

Modifier（モディファイア）

モディファイアは、ブロックやエレメントのバリエーション（例: 状態やバージョン）を示します。BlockやElementの見栄えを拡張するクラスとして存在し、同じブロックやエレメントに対して異なるスタイリングや振る舞いを定義できます。モディファイア名はブロック名やエレメント名に二重のハイフン「–」を使って連結されます。
例: button–active, header__link–disabled。

BEMの利用例を具体的にコードで紹介します。

<div class="header">
  <div class="header__logo">
    <img src="logo.png" alt="サイトロゴ">
  </div>
  <div class="header__menu">
    <a class="header__menu-link header__menu-link--active" href="/">ホーム</a>
    <a class="header__menu-link" href="/about">私たちについて</a>
  </div>
</div>

.header {
  background: #ffffff;
  padding: 20px;
}

.header__logo {
  float: left;
}

.header__menu-link {
  color: #000000;
  text-decoration: none;
  padding: 5px 10px;
}

.header__menu-link--active {
  color: #ff0000;
}

SMACSS

SMACSS（Scalable and Modular Architecture for CSS）は、CSSの設計方法の一つで、より部品化された構造で拡張が容易なアプローチを提供します。これは、大規模なウェブサイトやアプリケーションのために、CSSのメンテナンス性を向上させるためのガイドラインやスタイルのカテゴリ分けを推奨するものです。

SMACSSの主な目的は、CSSのルールを管理しやすく整理することで、プロジェクト全体でのコードの一貫性と再利用性を向上させることです。具体的には、スタイルシートの成長に伴う複雑性を制御し、スタイルの変更や更新を簡単に行えるようにすることを目指します。

SMACSSでは、スタイルルールを以下の五つのカテゴリに分類します。

１．Base（基本）

HTML要素（h1, p, ulなど）に直接適用される基本的なスタイル。

body, button, input {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

２．Layout（レイアウト

大枠のレイアウトを構成する部分（ヘッダー、フッター、コンテナなど）に適用されるスタイルであり、通常クラス名は l- または layout- で始める。

.l-header {
  width: 100%;
  height: 50px;
}

３．Module（モジュール）

再利用可能なコンポーネント（ウィジェット、ボタンなど）のスタイル。

.btn {
  padding: 10px 20px;
  background-color: blue;
  color: white;
}

４．State（状態）

モジュールやレイアウトが特定の状態（例：非表示、アクティブなど）にあるときのスタイル。is-、has- などの接頭辞を使い、後ろに状態を表す言葉を付ける。

.btn.is-active {
  background-color: red;
}

５．Theme（テーマ）

サイトのテーマに基づくスタイル（通常、色やフォントなど）。

.theme-dark .btn {
  background-color: black;
}

その他のCSS設計

他にもMCSS (Modular CSS）というCSSをモジュール化し、依存関係を最小限に抑える設計方法やFLOCSS（Foundation Layout Object CSS）という日本で考案された、BEMのような命名規則とSMACSSのような構造設計を組み合わせた感じのCSS設計手法などがあります。

ただし、基本的にはOOCSSとBEMを基本として作られていることが多いので、OOCSSとBEMの考え方を押さえることで、他のCSS設計も馴染みやすくなります。

まとめ　　書籍「CSS設計の教科書」を参考としました。

今回の内容はデイトラの講義と合わせて「Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ」という書籍を参考にしました。

以上で今回の学習記録を終えます。

ここまでご覧いただきありがとうございました。