WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

CSS設計 命名規則

SMACSS

Scalable and Modular Architecture for CSSの略スマックスと読む

日本語版の書籍はこちらで購入できる
Ja - Scalable and Modular Architecture for CSS

CSSのカテゴライズ

SMACSSでは、CSS設計のルールを5つのカテゴリに分類しています。

  1. ベース
  2. レイアウト
  3. モジュール
  4. 状態(ステート)
  5. テーマ

1.ベースルール

共通のCSSを書く。
あまり具体的には書かずリセットにとどめて置いた方が良い。

要素セレクタ(body、a)
属性セレクタ(input[type=text])
擬似クラスセレクタ(a:hover)

リセットCSSもベースルールに入る。

2.レイアウト

プレフィックス「l-」(もしくはlayout-)をつけ、ページのレイアウト分けをする

<div class="l-main"></div>
<div class="l-sub"></div>

3.モジュール

再利用可能なパーツ

・ロゴ
・ナビゲーション
・タブ

など

4.状態(ステート)

特定の状態のときスタイルが変化する
プレフィックス「is-」をつける

.is-hidden {}
.is-error {}
.is-active {}

など

5.テーマ

色に関わる部分をテーマで管理する
プレフィックス「theme-」をつける

OOCSS

Object Oriented CSSの略

「Object Oriented」はオブジェクト指向という意味
構造と見た目、内容を別々にクラス名をつける

BEM

Block、Element、Modifierの頭文字ベムと読む

「block__element–-modifier」のように
「__」「--」で区切る