【CSS】CSS設計論を勉強

はじめに

CSS設計論について勉強したことの備忘録を兼ねてまとめました。

CSS設計の必要性

CSSでは、同じ結果に対していろんな書き方があるので、後々の運用コストを下げるためにしっかりとした設計が重要

BEM

概要

BEMという考え方に基づいたCSS設計がある。BEMは、Block, Element, Modifier の頭文字をとったもの。ルールが割としっかり目に決まっている。クラス名の記法は、公式ではケバブケース（アルファベット小文字を、-でつなぐ）。キャメルケースもよく使われる。また、ルール衝突（クラス名の重複）回避のために下記のような接頭辞をつける方が良い。

• プロジェクト名
  myproject-... など
• ルールのカテゴリ
  Blockのb-、Layoutのl- など
• 使われている画面
  top-...、products-...、company-... など
• 機能名

Block

概要

画面をBlockの集まりとみなす。Blockとは、HTMLとCSSをセットにして考えたもの。コンポーネントとも呼ばれる。論理的、機能的に独立したページ内の一部品といえる。

粒度

• Blockをどのように再利用するか
• CSSが大きくなりすぎないか
  などによって粒度を決める。

クラス名の決め方

Blockの一番外側の要素にそのBlockを表す名前をつける。

例（ニュース欄をひとつのBlockとみなした場合）

<div class="news-column">...</div>

Element

概要

Blockの構成要素。次の利用方法はNG。

• あるBlock内のElementを別のBlockで使うこと
• Elementの中にElementを入れること

クラス名の決め方

Block名__Element名（_は２つ。）

メリットとデメリット

メリット

• スタイルの衝突を防ぐ
• HTMLから設計構造が見える
• CSSのセレクタが単純になる

デメリット

• クラス名が長ったらしい

Modifier

概要

BlockやElementに、少し違ったバリエーション（ちょっとした変化）をもたせるもの。

クラス名の決め方

• Block名_Modifier名_値
• Block名__Element名_Modifier名_値
• 省略記法
  • Block名--値
  • Block名__Element名--値
    省略記法がよく使われる。
    例 | message_type_successであれば、message--success

SMACSS

概要

SMACSSというCSS設計法もある。次の５つのルールからなる。

• Base
• Layout
• Module（BEMでいうところのBlock）
• State（BEMでいうところのModifier）
• Theme

Base

土台となるルール群。有名なnormalize.cssやReset CSSに自分のルールを加えたもの。

Layout

Blockをはめていくための枠組み部分。クラス名にglobal-layoutなどとつけて囲うことで実装する。

Theme

ダークテーマなど、全タオをごっそり変えたいときに使う。ルートに近い要素にテーマ種別などを表すクラスを設定し、クラスを動的に変更することで実現する。例 | html要素などにtheme-darkなど

ユーティリティクラス

概要

ちょっとした変更をするためのクラス。

例

.align-left{ text-align: left; }

上記の他にmarginなど。使いたい部分にクラスを追加する。

メリットとデメリット

メリット

ちょっとした変更をどのBlockでも使える。

デメリット

BEM的な設計を崩してしまう。従って、例外的な処理として使うこと。

余白

余白の位置

上と下のどちらに余白を取るか決めておいた方がいい。例えば、上だけ、や下だけ、など。

余白のバリエーション

m-sというクラスなら10px、m-mなら20px、m-lなら30px、などと設けておき、それらを使うと統一感が出る。

どの要素に余白を設けるか

• 画面数が多い場合
  シンプルにBlockに余白を設けた方が効率的
• 画面数が多くない場合
  余白専用Blockを用意する、余白用のユーティリティクラスを用意する、などで柔軟性を持たせることができる。

プロジェクトにおける進め方

ウォーターフォール的に自分の番が終わったらノータッチ、というのではなく、関わりの度合いを少しずつ変えていくというスタイルが良い。デザイナーの例でいえば、関わりの度合いが最初の工程は大きく、後工程になるほど漸減していくようなもの。

スタイルガイド

概要

デザインやコードの記述方法などについてまとめた資料のこと。プロジェクトのコード品質維持、生産性の向上の役にたつ。コーディングルール、コンポーネントの一覧を先に決めておくことが重要となる。

公開されているもの

• Google HTML/CSS Style Guide
• Dropbox (S)CSS Style Guide
• Primer

スタイルガイド作成支援ソフトウェア

• Storybook

その他重要な概念など

• ビルド
• minify
• gulp
• Sass
• Autoprefixer
• PostCSS
• ユーティリティファースト

参考文献

ざっくりつかむCSS設計
高津戸 壮　氏　著