より良いCSSを書くための様々なCSS設計まとめ

CSSは誰でも簡単に自由に書けるのですが、好きなように書いていると「ここを変更したら、違うところが崩れた」といったようにすぐに破綻してしまいます。

さらに、複数人で書いている場合は、各々が好きなように書いて読むだけでも苦痛なCSSが出来上がってしまいます。

そこで、これらの問題を解決するために考えられたのが「CSS設計」です。

今回は記事が長くなり過ぎるので、CSS設計の概要のみを説明し、参考となる公式ドキュメントへのリンクを記載しました。

CSS設計とは

CSS設計は、CSSを記述する時のルールとなるものです。プロジェクト毎に適したCSS設計を採用することで、「良いCSS」にすることができます。

最近では、命名規則はBEMで、構成はSMACCSのように各CSS設計の概念を取り込んだオリジナルの規約をつくるといったことも多いようです。

「良いCSS」とは

「良いCSS」の定義として、おそらく最もよく知られているのは、以下の4つです。

• 予測しやすい
• 再利用しやすい
• 保守しやすい
• 拡張しやすい

CSS Architecture
CSS Architecture（日本語訳）

また、CSS設計の基本となるモジュールなどについては、MaintainableCSSが参考になります。

MaintainableCSS
MaintainableCSS（日本語訳）

マルチクラス・シングルクラス

１つの要素に対して、複数のクラスを指定するのをマルチクラス、１つないし２つ程度のクラスを指定するのをシングルクラスと呼びます。

例えば、BootstrapをはじめとしたOOCSSはマルチクラスで、BEMはシングルクラスが適していると言われています。

ただし、これらはそこまで厳密なものではなく、BEMだから絶対にシングルクラスにすべきという事ではありません。

OOCSS

OOCSS は、 Object Oriented CSSの略で、オブジェクト指向CSSなどと日本語では呼ばれます。

SMACCSなどの基礎となる考え方で、以下の２つがポイントとなります。

• Container（入れ物）とContents（中身）の分離
• Structure（基本構造）とSkin（見た目）の分離

Bootstrapを使ったことがある人であれば、理解しやすいのではないでしょうか。

シンプルなルールなので採用がしやすい反面、Bootstrapのように各UIに統一した名前をあらかじめ決めておかないと破綻しやすいです。

OOCSS公式サイト

BEM

BEMとは「Block」「Element」「Modifier」の略であり、要素をこの３つに分けて考える厳格な命名規則です。CSS設計で使う場合、BEMを元にしたMindBEMdingが使われます。

「.Block__Element--Modifier」という命名ルールに従いクラス名を決めます。

Blockは常に独立しており、ページのどこでも配置することができ、他のブロックを含んだり含まれたりすることもできます。ElementはBlockを構成する要素で、ModifierはBlockの異なる状態を表します。

例えばメニューを例とすると、以下のようになります。

• Block ： .menu
• Element ： .menu_item
• Modifier ： .menu__item--current

また、命名規則にcamelCaseを採用するなどカスタマイズして利用している人も多いです。

Key concepts | BEM
Key concepts | BEM（日本語訳）
MindBEMding（日本語訳）

SMACCS

SMACSSは、 Scalable and Modular Architecture for CSS の略で、OOCSSやBEMなどを参考に考案されました。

SMACSSでは、スタイルをBase, Layout, Module, State, Theme の ５つに分けて考えます。ただし、Themeはプロジェクトによっては、使われないこともあります。

• Base : デフォルトのスタイル
• Layout : Moduleの配置を決めるレイアウト
• Module : 再利用可能なパーツ
• State : Layout、Module 状態
• Theme : Layout、Moduleの外観

BEMより緩い命名規則と、OOCSSのようなマルチクラス設計が特徴です。公式ドキュメントは、日本語では本で読むしかなさそうです。

Scalable and Modular Architecture for CSS
Scalable and Modular Architecture for CSS（日本版）

MCSS

BEMとOOCSSの原理を基にしたCSS設計が、MCSS（Multilayer CSS）です。

CSSモジュールを３つのレイヤーに分けて考えます。

• Base : 再利用可能な標準スタイルのセット
• Project : Baseを元にしたプロジェクト毎のスタイル
• Cosmetic : 色、サイズなどわずかに影響するスタイル

Base、Project、Cosmeticのそれぞれに属するクラスを、複数指定することでUIを作成します。

MCSS（日本語訳）

FLOCSS

OOCSS, SMACSS, BEM, SuitCSS, MCSSなどの考え方を取り入れたものです。

命名規則はMindBEMdingを採用し、３つのレイヤーと、Objectレイヤーの子レイヤーで構成されます。

• Foundation : normalize.cssなど
• Layout : レイアウトのスタイル
• Object : コンポーネントのスタイル
  • Component : 再利用可能なコンポーネント
  • Project : プロジェクト毎のスタイル
  • Utility : clearfixã‚„marginなどの小さなスタイル

CSS設計のいいとこ取りをしたいときは、FLOCSSをベースにすると良いかもしれません。

FLOCSS

CSS in JS

React.jsの流行と共に、広まりつつあるアイデアの１つです。HTMLをJSXとしてJavaScriptで扱えるようにしたように、CSSをJavaScriptのオブジェクトにして扱うという考えです。CSS設計とは異なりますが、新しいCSSの記述方法として紹介します。

React.jsの開発者のReact CSS in JSによってこのアイデアが広まったとされています。

現在、ReactでCSS in JSを実現するライブラリとしては、ReactStyleやRadiumなどがあります。詳しくは、Reactで使えるライブラリ一覧を参照してください。

また、CSS in JSとCSS Modulesについて書いてある「Reactを使ったモジュラーCSS : CSS-in-JSとCSS Module」も参考になります。

Scoped CSS

Scoped CSS自体は、CSS設計ではなくHTML5で追加された scoped属性を使ったCSSの記述方法です。

基本となるのは、UIをコンポーネント化し、そのコンポーネント内でのみ適用されるCSSを記述するという考え方です。

Firefox以外ではサポートされておらず、実際に使うならばPollyfillを使うか、Scoped CSSをサポートしているRiot.jsなどを使う必要があります。

まとめ

このほかにもSuit CSSや、最近だとEnduring CSS（ECSS）やAtomic DesignをベースにしたAPBCSSなどのCSS設計があります。

また、React.jsなどの登場によりJavaScriptとCSSを組み合わせた新たなアプローチが登場しましたが、JavaScriptを理解しなくてはならないので採用するのはややハードルが高そうです。

どのCSS設計が最適かは、メンバーとサービスの規模によって異なるのでよく検討したほうが良いでしょう。

＊追記：APBCSSの紹介を「まとめ」に追加（2016/07/11）