Posted at

CSS設計の特徴と技術


目的

CSS設計の考え方をまとめていつでも使えるようにしたい。


背景

業務でデザイナーと協力してCSS設計を行うことになった。


前提

HTML&CSSも並行して勉強中。


OOCSS(オブジェクト指向CSS)


特徴

CSSにオブジェクト指向の概念を取り入れたもの。大原則は以下の2点。

1. 構造と見た目を分離

2. コンテナ(入れ物)とコンテンツ(中身)を分離


構造と見た目を分離


コンテナとコンテンツを分離


SMACS


特徴

OOCSSをベー巣に考えられた設計。ページを以下のカテゴリに分類する考え方を採用している。

1. Base

2. Layout

3. Module

4. State

5. Theme


Base

htmlやbodyに適用するような全体の背景やフォントなどを定義する。このカテゴリは基本的に上書きされることはないため、上書きされるような定義はしない。


Layout

IDセレクタで定義されるような大枠(ブロック)や、グリッドレイアウトなどのレイアウトルールを定義する。


Module

ボタン、見出し、リンク、などなどのパーツ。


State

Javascriptの制御によって切り替わる状態。display:noneとかが該当する。


Theme

全体のテーマの切り替え。白背景→黒背景とか。


その他


  • 子供セレクタをなるべく使わないことでHTMLとCSSの依存関係を減らす。

  • コンポーネントを拡張するときは、子供の命名規則には親のコンポーネント名をケバブケースで付与することで名前の汚染を防ぐ。
    # BEM
    ## 特徴
    Block,Element,Modifierの略。命名規則に着目したアプローチ。
    ## Block
    ブロック。親。
    ## Element
    Blockと親子関係にあるもの。
    block__nameのような名前を付ける。
    ## Modifier
    BlockやElementのバリエーションの違い。
    block--modifierelement--modifierのような名前を付ける。
    # MCSS
    ## 特徴
    MultilayerCSSの略。OOCSSとBEMを合わせたようなもの。SMACSが5つのカテゴリ分けを行う考え方なのに対し、MCSSは4つのレイヤーを定義している。

  • Foundation

  • Base

  • Project

  • Cosmetics
    下位レイヤー(番号が小さい)から上位レイヤー(番号が大きい)は上書きできないが、逆は可能という考え方。
    ## Foundation
    SMACSSでいうところのBase。
    ## Base
    SMACSSでいうところのModule。共通のパーツ。
    ## Project
    Baseよりも具体的な要素。
    ## Cosmetics
    ちょっとしたレイアウトの変更など。
    # マルチクラスとシングルクラス
    ## マルチクラス
    上記まで記載したきて各設計手法のような、コンポーネントごとにクラスを作成し、必要に応じて複数のクラスをHTMLに適用していく。
    ## シングルクラス
    Sass等を使って、クラスセレクタ名にはセマンティックな名前をつける。