SMACSS
Scalable and Modular Architecture for CSS（スマックス）
拡張可能でモジュール的なCSS設計という意味
役割に応じてコードをカテゴリ分け
1. ベース
要素型セレクターや子孫セレクター
2. レイアウト
ヘッダーやメインエリア、サイドバー、フッターなどのモジュールに対するルール
l-というプレフィックスをつける（ID ではつけなくてもよい）
ID を使ってもよいが、筆者の考えではクラスセレクターで統一するのがベター
3. モジュール
見出し、ボタン、カード、ナビゲーションなど、レイアウトモジュール内に配置されるモジュール
別のレイアウトの中に問題なく埋め込めるように
クラスセレクターを使用する
なるべく要素型セレクターを使用しない
要素をセマンティックにする
div要素とspan要素にはクラスをつける
特定のコンテキストにみだりに依存しない
要素型セレクターを使うときは子孫セレクターではなく子セレクターを推奨
子孫セレクター：.media > h2のように>で指定
コンテキストに依存させるのではなく、サブクラスで解決した方がよい
4. 状態（ステート）
状態スタイルはレイアウトやモジュールに割り当てることができ、
状態スタイルはJavaScriptに依存するという意味を持つ
is-のプレフィックスをつける
クラス名にモジュール名を含めることを推奨
5. テーマ
既存のスタイルを上書きする
theme-のプレフィックスをつける