こんにちは。エンジニアの片岡です。

CSSを業務で使い始めて早5年が経過しようとしています。

今回は今までCSSを触ってくる中で避けてきていた設計思想について3種類調べてみました。

実務で、「この設計思想を使ったら困った」といったこともありましたので、例も挙げつつ紹介していきます。

CSSを書いていく中で、そのコードをどのようなルールで書いていくか？どのように管理していくか？を決める手法のことです。

クラス名の付け方をはじめ、各々が好きなように作成してしまうと、人が作ったところが理解しにくかったりなどありますよね。

プロジェクトやチーム内でルールを統一することで、メンテナンスがしやすい綺麗なコードを目指していきます。

厳密なクラス名の命名規則を指定した設計思想です。

BEM記法では下記の3つの要素を「__」や「–」で連結することで表現します。

• Block：大枠となる独立した要素
• Element：Blockに所属する子要素
• Modifier：基本のBlockやElementから派生させる際に利用する要素

.user-form__name-input { ... }

.user-form__name-input--active { ... }

クラスの付け方が明確でわかりやすいですね。

クラス名を見るだけで、ユーザー情報の氏名の入力部のCSSで、active時だけ追加のCSSがかかりそうだということがわかります。

このように、クラス名を見ればどの部分を指しているのかわかりやすく、影響範囲が特定しやすいことがメリットの1つですね。

また、複数のクラスを組み合わせてデザインを表現するのではなく（マルチクラス）、1要素に対して1つのクラスでデザインを表現するシングルクラスである点が特徴です。

オブジェクト指向CSSと呼ばれ、EGが好きな設計思想です。（偏見）

・構造と見た目の分離

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

を原則としています。

構造の分離というのは下記のようになります。

/* ボタンの構造を記載 */
.btn { width: 120px; height: 40px; text-align: center; }

/* ボタンの見た目を記載 */
.btn-blue { background-color: #00f; color: #fff; }

<!-- 「一般のボタンの形」で、「青色の見た目」のものを表示する -->
<a href="..." class="btn btn-blue">

イメージが付きましたでしょうか？

この書き方の利点は、いろいろな色のボタンを増やしていった後「ボタンのheightを30pxに変えたいな～」となった際、.btnを変更するだけですべての色のボタンに反映されます。

シングルクラスの思想の場合は全クラスのwidthを変える必要があるので、それを考えるととても楽ですね。

ただし、赤色のボタンだけ大きくしたいとなった場合は「.largebtn」のような別の構造を定義するクラスを作成する必要があり、「class=”.btn .btn-red”」を全て「class=”.largebtn .btn-red”」に変えていく必要があります。

どちらの方がよいかは好みですので、まずは試してみて自分に合ったものを使いましょう。

OOCSSのマルチクラスと、BENのクラス名のわかりやすさをいいとこどりしたものです。

・Base：サイト全体のスタイルなど、サイトのベースにあたるものを指定する

・Layout：ヘッダーやフッターなど、大まかなレイアウトのルールを指定する

・Module：BaseやLayoutよりも細かい、全ての再利用可能なパーツ

・State：Javascriptなどの状態によって見た目が変わる場合のスタイルを指定する

・Theme：テーマ全体で統一するスタイルのこと

の5つの要素に分かれています。

Base, LayoutはOOCSSの構造の部分に該当しますね

ここにいろいろと書きすぎてしまうと後から上書きが必要になるので、不要なCSSのリセットや文字フォントの指定程度にとどめましょう。

ModuleはBEMのBlockのような単位ではありますが、サイト内の別の個所でも使いまわせるように指定します。

StateはBEMのModifierを1つのクラスに分割したようなイメージですね。

Themeは背景色や文字色など、そのテーマ独自のデザインを当てる際に利用します。

ここだけ切り替えればカラーチェンジは可能になるような部分ということです。

直近でBEM記法を利用していて思ったことなのですが、「Block」の定義がかなり重要だと感じました。

ご存知の通り弊社ではECサイトのパッケージを販売している中で、（システム的な理由で）使いまわしたいデザイン上のパーツというものがたくさんあります。

例）クーポンの選択モーダルをは注文フローの複数箇所に置きたい など

こういったときに

「カートリスト画面の（B）」「クーポンモーダル（E）」「オープン（M）」

「注文確認画面の（B）」「クーポンモーダル（E）」「オープン（M）」

とクラス名を設定してしまうと、同じ表示内容なのにCSSが2箇所にできてしまうことになります。

≒クーポンモーダルを修正するときに2箇所修正しなければいけないです。

「クーポンモーダルの（B）」「ドロップダウンフォーム（E）」

などと指定するのが正解ですね。

「システムとして分けたいパーツ単位でBlockを決める」という必要があり、

システムを作るものとデザインを当てるものの認識共有がすごく大事だなと思いました。

その点、マルチクラスであるOOCSSであればこの辺りの問題にはぶつからなかったと思いますので、再利用が多いシステムと組み合わせるのであればOOCSS、ページごとにデザインが全く異なる静的ページなどの場合はBEMが向いているのかななどと考えていました。

いかがだったでしょうか？

今回紹介したのはあくまでルールの1つであり、ただのガイドラインです。

各々好みがありますし、1人で作っている方であれば自分がわかりやすい方法が一番でしょう。

この記事を書く中で「ぼくのかんがえたさいきょうのしーえしゅえしゅ（http://t32k.me/mol/log/the-perfect-css-i-thought/）」なる面白いサイトも見つけました。（個人的にはかなり好きです）

所詮、そのCSSファイルを触る人にしか影響がない部分なのでこれぐらいでよいのです。

皆さんもCSSを1から書く際などはぜひ上記のような設計思想を参考に、自分の使いやすいルールを探してみてください。

それでは、よいCSSライフを。