2013年とか2014年に話題になった(?)CSS設計

Webで読める本

参考

概要と例

5種類

Base

要素そのもののdefaultを定義する

classやidに対してではなく要素に対して定義する

サイト全体のcolorの指針を決めたりする

Reset CSSも含む

Layout

ページのエリアごとのstyle

classのprefixとして l- を付ける

e.g. .l-header , .l-footer , .l-main

Module

再利用可能なパーツ

State

LayoutやModuleの特定の状態を示す

その特定の状態で、LayoutやModuleのstyleを上書きする

JSに依存する

e.g. .is-pressed , .is-disabled

Theme

サイトのルック＆フィールを定義

あまり使わない