CSS設計はどれがいい？4種の設計手法をわかりやすく解説

CSSはとてもシンプルで単純なコードだけで作成できます。ですがとくに何も意識しないでCSSを書くと、大規模クラスのサイトの設計や複数人で作業する際にコードが煩雑になってしまい管理が難しくなってしまいます。

そこで登場するのがCSS設計です。
ここではCSS設計の基本と手法についてご紹介します。

CSS設計とは

CSS設計とは、CSSのメンテナンス性や作業効率化のための「コードの管理方法」と「クラス名の命名規則の考え方」です。CSS設計を取り入れることで、作業の効率化と全体のクオリティ担保につながります。

【設計に入る前に】よいCSS設計とは？

CSS設計をする前提として、そもそもよいCSSとは何なのか？という考え方が基本になっていきます。
それが以下の4つの条件です。

1. 予測しやすい
2. 再利用しやすい
3. 保守しやすい
4. 拡張しやすい

これらを満たすのがよいCSSとされています。
それぞれ見ていきましょう。

1.予測しやすい

誰が見てもどこに使われているか、どのようなものなのか予測ができることが大切です。

設計で大切なのは「誰でもわかるようにする」ことです。例えばボタンのパーツのclassに「image」という命名をすると、このパーツはボタンなのか画像なのかわからないですよね。誰にでもきちんとわかるように、ボタンには「button」という命名をしたほうがいいということです。

またコードの影響範囲がわかるようにしておくというのも、「予測しやすい」部分になります。「CSSを追加したら意図しないところにスタイルが当たった」ということがないように設計しましょう。

2.再利用しやすい

同じパーツが複数箇所で必要になった場合、書き直したり上書きしたりしなくても再利用ができるようにしておくことです。同じようなパーツを別々のパーツにしたことで、上書き上書きで膨大な量のソースコードになってしまって管理ができなくなることを防ぎます。

3.保守しやすい

新しく機能を追加したり更新したりしても、既存のスタイルやルールが破綻しない、リファクタリングをしなくてもよいコードのことです。

4.拡張しやすい

作業者が1人であっても複数人でも問題なく管理できる状態にすることです。誰でもわかるルールを採用して学習コストを低くし、管理をしやすくする必要があります。

代表的なCSS設計手法

では、よいCSS設計の条件をクリアするCSSの書き方とはどんなものでしょうか。ゼロから自分でルールを作ったら大変ですよね？
おすすめは、すでによく使われているCSS設計手法をそのまま使うことです。

一般的にCSS設計の手法はいくつかあるのですが、主に使われているのは以下の4つになります。

• BEM
• OOCSS
• SMACSS
• FLOCSS

それぞれに特徴があり考え方やルールが違いますので、一つずつ見ていきましょう。

BEM

BEMとはBlock、Element、Modifierの3つの要素から構成するCSS設計手法です。
この3つにはそれぞれルールが設けられています。

Block

ブロック要素はコンテンツを内包する外枠で、どこでも再利用可能なことを前提にしたパーツになります。

classの命名は重複NGで、1コンテンツに1つだけです。重複しない代わりにブロック要素は入れ子になってもOKです。空間系（margin、paddingなど）のスタイルはブロック要素には設定しないようにしましょう。

  <div class="block"></div>

Elemment

エレメント要素はブロック要素に含まれる構成要素です。

class名には必ずブロック要素が前に付くようにします。ブロック要素内であれば複数使用することができます。単独では使用できません。必ずブロック要素の中で使用しましょう。

  <div class="block">
    <div class="block__elemment"></div>
  </div>

Modifier

モディファイアは、ブロック要素やエレメント要素の見た目、状態、振る舞いを定義するものです。
例えば、以下のようなときにモディファイアが活躍します。

• 見た目：通常のコンテンツ幅は1200pxだが、フォームがあるページでは800pxになる
• 状　態：通常のボタンは黒背景のものがボタンが押せない場合は灰色になる
• 振る舞い：通常はセンター揃えだが、お問い合わせページでは右揃えになる

1つの要素に対して複数のモディファイアが設定できます。
こちらも単独では使用できません。必ずブロック要素とエレメント要素に付属するものとして使用しましょう。

  <button class="button button--disabled"></button>
  <div class="box box--small"></div>
  <p class="text text--center"></p>

OOCSS

OOCSSとは、Object Oriented CSSの略で、米ヤフーのNicole Sullivanによって2009年に発表されたCSS設計手法です。

「Object Oriented」は「オブジェクト指向」という意味です。オブジェクト指向に基づいて考案されたOOCSSは、Bootstrapでも採用されています。

OOCSSは以下の2つの考え方で構成されています。

• 構造と見た目を分離
• コンテナとコンテンツを分離

構造と見た目を分離

例えばボタンのパーツを作るとして、大枠のwidthやheightなどの構造と、背景色や文字色などの見た目を別のclassにするということです。こうすることで他の色を追加するときも少ないコードで定義できます。

  <button class="button back-blue"></button>
  /* 構造 */
  .button {
    width: 200px;
    height: 50px;
    text-align: center;
  }
  /* 見た目 */
  .back-blue {
    background: blue;
    color: white;
  }

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

再利用する要素がコンテンツで、その要素を囲む大枠がコンテナです。コンテナとコンテンツを分離すれば、場所に関係なくパーツが使える構造になります。

例えば、見出しのパーツを作成するときにclass名を定義してCSSを当てれば、違う場所にあるHTMLタグにも同じスタイルを適用できます。class名を定義しないと、.contact h2 のように「.contactの配下」でしか使えないコードになってしまい非効率です。

NGのパターン

これだと class=”contact” の配下でないとh2のスタイルが使えなくなる。

  <div class="contact">
    <h2>見出し</h2>
    <p>テキストテキストテキスト</p>
  </div>

  .contact h2 {
    font-size: 20px;
    font-weight: bold;
  }

OKのパターン

これであればどこでも使用できるパーツになる。

  <div class="contact">
    <h2 class="title">見出し</h2>
    <p>テキストテキストテキスト</p>
  </div>

  .title {
    font-size: 20px;
    font-weight: bold;
  }

SMACSS

SMACSS とは Scalable and Modular Architecture for CSS の略で、「スマックス」と読みます。
SMACSSは次の5つの分類のカテゴリで構成されます。

• ベース
• レイアウト
• モジュール
• 状態（ステート）
• テーマ

5つのカテゴリに分類することで、カテゴリが混ざり合うのを防ぎます。
繰り返し使えてコードが少なくなり、メンテナンス性も高まり、ユーザ体験における一貫性も向上するというのがSMACSSの考え方です。
公式サイト：https://smacss.com/

ベース

ベースは要素そのもののデフォルトスタイルを定義します。IDやclassは使用しません。
1つの要素に対して要素セレクタ、子孫セレクタ、または子セレクタ、疑似クラスを使って適応されます。リセットcssもこの分類に入ります。

  body, form {
    margin: 0;
    padding: 0;
  }
  a {
    color: #039;
  }
  a:hover {
    color: #03F;
  }

レイアウト

レイアウトはページのエリアごとに分割するためのスタイルを定義します。エリア分けになるので、見た目のスタイルなどはここではつけません。
接頭辞は「l-」か「layout-」をつけて、レイアウトパーツだとひと目でわかるようにしておきます。

  l-main {
    max-width: 1200px;
  }
  .layout-section {
    margin: 30px 0 0;
  }

IDも指定できますが、詳細度を高めてスタイルをより複雑にしてしまうことがあるため、ここでは推奨されていません。使用する際は注意が必要です。

モジュール

モジュールはページ内の個別のコンポーネントです。他のページや、他のレイアウトの中で使っても同じスタイルのまま担保できるようなパーツを作成します。

ここで具体的な見た目の定義をします。class名はモジュールに関連する命名をして、子要素は親を継承して-で区切ります。被りがなければ要素セレクタで指定も可能ですが、あまり推奨されていません。

  <div class="module">
    <p class="module-text">aaaa</p>
  </div>

状態（ステート）

状態とは他のスタイルを拡張して上書きするものです。Javascriptなどで状態が切り替わったりするときに定義します。

classの命名は「is-XXXX」です。例えばアコーディオンで開いたり閉じたりしたときにスタイルを変えたり、タブの切り替えでスタイルを変えたりするのを状態として定義します。

  <div class="accordion is-open">
    <p class="accordion-title">アコーディオンタイトル</p>
    <p class="accordion-text">アコーディオンテキスト</p>
  </div>

  .accordion.is-open .accordion-title{
    color: #0022ff;
  }

テーマ

テーマはサイト全体の見た目や、雰囲気を統一させるためのスタイルを指定します。同じようなサイトを複数作って、色だけ変えるというときなどに使用します。
classをつける場合は「theme-」を先頭に記述します。

FLOCSS

FLOCSSは、「Foundation Layout Object CSS」の略称で、「CSS設計の教科書」の著者の谷拓樹さんという方が提唱した手法です。Foundation、Layout、Object（Component、Project、Utility）の要素で構成されています。

公式ドキュメント：https://github.com/hiloki/flocss

Foundation

リセットcssやサイトの基本となるスタイルを定義します。

Layout

ヘッダー、フッター、コンテンツなどのサイト全体の共通部分となるものを定義します。
接頭辞は「l-」をつけます。

<div class="l-layout"></div>

Object

Objectは再利用可能なモジュールを定義します。
さらに3つの階層で分類されています。

Component

Componentは最小モジュールパーツを指します。ボタンやナビゲーション、タイトルなど、どこでも汎用的に使えるパーツです。
接頭辞は「c-」をつけます。

<div class="c-button"></div>

Project

各ページごとのスタイルを定義します。接頭辞は「p-」をつけます。

<div class="p-contact"></div>

Utility

余白や非表示の設定など、ComponentとProjectでは定義できない細かい調整を定義します。
接頭辞は「u-」をつけます。

<div class="u-mt0"></div>
<div class="u-width-75"></div>

結局どの手法を選ぶべきか？

各手法のメリットとデメリットをまとめると、以下のとおりです。
メリットには◯、デメリットには△がついています。

これを踏まえると、CSS設計を初めて導入してみたいならシンプルなルールが売りのBEM、がっちりルールを設定したいときはSMACSS、FLOCSSあたりがおすすめです。ただし、それぞれデメリットへの対策は必要ですので、class名の付け方や分類のルールは話し合っておきましょう。

ちなみにCOOSYではBEMを採用しています。メリットやデメリットを検討した結果、COOSYにはBEMが一番合っていると判断しました。

CSS設計手法の中でどれが一番優れている、一番使いやすいなどはありません。案件の特性で判断したり、チーム内で話し合って使いやすい手法を選択してください。

まとめ

以上、CSS設計の各種設計手法について解説しました。

記事でも触れたとおり、CSS設計を導入することで保守や拡張をしやすいコードが書けるようになります。CSS設計の導入を検討している場合は一度気になるものを試してみて、自分の考え方に合っているか確かめた上で選択してみましょう。