はしくれエンジニアもどきのメモ

情報系技術・哲学・デザインなどの勉強メモ・備忘録です。

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

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

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

schoo.jp

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), GithubYoutube でも使われている。

公式サイト:
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の使用をしているサイト例:

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の弱点として、クラス名を決めやすいが、 名前が長くなり開発に時間が掛かる傾向がある。。

MindBEMding

BEM は、命名ルールが厳格かつ、名前が長くなりやすいということで、 使いづらい場合がある。 そこで、BEMのエッセンスを取り入れつつ、 命名ルールは自分たちでカスタマイズして使う「MindBEM」 という方法もある。

CSS Wizardry

csswizardry.com

SMACSS

SMACSSは、 Scalable and Modular Architecture for CSS の略である。

OCSS,BEM の流れをくみつつ、 ドキュメントを落とし込まれたコーディングルールである。 Jonathan Snook氏によって考案された。

公式:

Home - Scalable and Modular Architecture for CSS

参考:

SMACSSによるCSSの設計 - ベースとレイアウト | CodeGrid

SMACSSのポイントは、「要素をBase, Layout, Module, State, Theme の 5つに分ける」ことである。

要素をBase, Layout, Module, State, Theme の 5つに分ける

定義としては、以下のようになる。

  • Base:
    reset.css やhelper.css など要素そのもののデフォルトスタイル、 基礎の部分になる。

  • Layout:
    headerはどこに置くか、mainはどこに置くかなど、 ページをエリアごとに分割する。

  • Module:
    記事、ボタンやフォームなど、使い回したいパーツになる。

  • State:
    タブ切り替え時の色が変わるなど、 Layout やModule の特定の状態を示す。

  • Theme:
    サイト全体の色など、Look&Feel(外観) を定義する。

他にも以下のルールがあります。 今回、詳細は省きます。

  • マルチクラス推奨

  • (BEM より)ざっくりた命名規則

  • Sass での実装方法 など

まとめ

3つまとめると以下のようになる。

    OOCSS
  • CSS設計においての考え方

  • マルチクラス

    BEM
  • ツール+手法

  • シングルクラス

    SMACSS
  • コーディングルール

これらをそのまま使う、または組み合わせることで、 拡張性、保守性、可読性の高いCSS設計ができると思います。