CSS設計を学んで、拡張性と保守性に強いCSSを書こう[メモ]

schoo 授業「CSS設計を学んで、拡張性と保守性に強いCSSを書こう！基礎〜実践導入」のメモです。

OOCSS, BEM, SMACSSの概要をまとめておきます。

CSS設計とは

CSS設計とは、SMACSSでは以下のように書いています。

CSSをより体系立て、より構造化させることで制作とメンテナンスをより容易に行う。 (What I have discovered are techniques that can keep CSS more organized and more structured, leading to code that is easier to build and easier to maintain.) [引用：SMACSS ]

CSSに強い

拡張性
保守性
明瞭性

が大事になります。

また、CSS設計に、いろいろな手法があるが、どれにも長所・短所があるので、

（CSS設計手法を）たくさん知る
いいとこだけ取る
自分なりの設計をしてみる

がポイントになる。

CSS設計の三大メソッド

css設計では、有名ドコロに、以下の3つがある。

OOCSS
BEM
SMACSS

OOCSS

OOCSS は、 Object Oriented CSSの略。

オブジェクト指向に基づいて、考案された設計手法である。 Yahoo! のNicole Sulivan 氏によって開発された。 Twitter（とBootstrap）, Github や Youtube でも使われている。

公式サイト：
Object-oriented CSS

参考リンク：
知っておきたいHTMLテンプレート設計法 - OOCSSの基本 | CodeGrid

ポイントは、以下の2つ。

要素をContainer(wrapper) とContents に切り分ける。
要素をStructure とSkin に切り離して考える。

要素をContainer(wrapper) とContents に切り分ける

「要素をContainer(wrapper) とContents に切り分ける」というのは、オブジェクト指向の考え方と同じ。

以下の登録画面を考えた場合、 .register を「Container」として、その中に「Contents」として.heading, .text, .input×2 と.btnで構成されていると見ます。

登録画面

下記を入力して下さい。

OOCSS では、.register > p のような、依存したスタイルの充て方（子、子孫セレクタの指定など）はせず、 .textのように独立してスタイルを充てる。このように、 Contents としてパーツ化しておくと、他の場面にも使い回すことができる。

要素をStructure とSkin に切り離して考える

例として、ボタンを分解して考える。ボタンを構成するdisplay, border-radius, text-align などの構造を「Structure」として、色やサイズを「Skin」と分ける。

Skin を組み合わせることで、ボタンの構造を変えずに、以下のように、いろいろなボタンを作ることができる。

ボタンのStructure の例は以下です。


.btn {
  display: inline-block;
  border-radius: 5px;
  text-align: center;
}

ボタンのSkin（色）の例は、以下です。


.btn-pink {
  background-color: pink;
}

.btn-green {
  background-color: green;
  color: white;
}

.btn-blue {
  background-color: blue;
  color: white;
}

ボタンのSkin（サイズ）の例は、以下です。


.btn-small {
  width: 6rem;
  height: 3rem;
  font-size: 1rem;
}

.btn-medium {
  width: 9rem;
  height: 4.5rem;
  font-size: 1.5rem;
}

.btn-large {
  width: 13.5rem;
  height: 6.75rem;
  font-size: 2.25rem;
}

青色の小さいボタンを作りたければ、マルチクラスで以下のように書きます。


<button class="btn btn-blue btn-small">button</button>

Skinを追加することで新しいボタンを作ることができるので、拡張性の高いCSS設計ができます。

BEM

BEMは、 HTML構造を明確にすることに軸をおいた設計ツール、及びその手法になる。特徴として、厳格な命名規則がある。

ロシアのYandex社によって考案された。

※ツールもあるが、手法の方がよく使われる。

公式：

en.bem.info

ドキュメント（日本語訳）：

github.com

参考：
BEMによるフロントエンドの設計 - 基本概念とルール | CodeGrid

BEMの使用をしているサイト例：

Yandex （ロシアの検索エンジンサイト（日本で例えるとYahoo））
Wimdu‐ホテルより格安なアパートやシェアハウスに宿泊!今すぐ予約
comico（コミコ） - タダ読み！タテ読み！人気のオリジナル漫画・小説が無料読み放題

BEM のポイントは、以下である。

要素をBlock, Element, Modifier の3つに分ける。（頭文字を取ってBEM である。）
命名ルールは、 .Block__Element_Modifier を用いる。

要素をBlock, Element, Modifier の3つに分ける

同じ登録画面を例にすると、 OOCSS でいうところのContainer部分を「Block」として考える。 Blockの中を、heading, テキストやボタンとして要素「Element」に分ける。「Modifier」は、同じBlock またはElement で別の種類に分ける（派生）ときに使う（色、大きさを変えるなど）。

登録画面

下記を入力して下さい。

命名ルールは、.Block__Element_Modifier を用いる

Block名として、.regisiter として、各Element名をOOCSS で使ったContents名を使うと、クラス名は以下のようになる。

.register__heading
.register__text
.register__input
.register__btn

Modifierとして、緑色のボタンを考えると以下のような名前が考えられる。

.register__btn_color_green

以下、上記の登録画面において、「緑色のボタン」を作った場合のHTML, CSSの例です。


<!-- html -->
<button class=".register__btn .register__btn_color_green">button</button>


// css
.register__btn {
  display: inline-block;
  width: 8rem;
  height: 4rem;
  border-radius: 5px;
  text-align: center;
}

.register__btn.register__btn_color_green {
  background-color: green;
}

BEMの弱点として、クラス名を決めやすいが、名前が長くなり開発に時間が掛かる傾向がある。。