刺身タンポポ職人なう

文系女子大生がエンジニアとして就職してその後

CSSのコンポーネント設計まとめ

機能や振る舞いを明確に分離していくコンポーネントの設計

OOCSS(Object Oriented CSS)

  • 構造と見た目の分離
.btn {
  border: 2px;
  padding: 10px;
  color: #fff;
}

.primary {
  background-color: blue;
}

.error {
  background-color: blue;
}
<div class="btn primary">primary</div>
<div class="btn error">error</div>

SMACSS(スマックス)

SMACSSのカテゴリ

  • Base
    • 各要素のデフォルトの設定
    • reset.cssや全体の背景・フォント・リンク色を指定
  • Layout
    • IDを用いて定義されるheaderやfooter、sidebarのような大枠の設定
    • 再利用されるレイアウトに関するルールを指定
    • 接頭辞はl-を推奨
  • Module
    • Layoutを除いたもの
    • ボタンや見出し。アラート等再利用できるオブジェクト
  • State
    • JSによる盛業などによって切り替わる状態を表すルール
    • is-tab-active is-hidden 等接頭辞にはis-推奨
  • Theme
    • テーマの切り替え等の機能がある場合に使用

BEM(ベム)

  • Block - 大枠(?)
.alert {
  ...
}
  • Element - Blockを構成する要素
.alert__title {
  ...
}

.alert__body {
  ...
}

alertというBlockに対する、titleというElemtntということで__で区切る

  • Modifier - BlockまたはElementのバリエーションの違い
.alert_warning {
  
}

Modifierの関係にある場合は_で区切る

MindBEMding

Elementを__、Modifierを--で区切る命名規則

MindBEMding – getting your head ’round BEM syntax

Element

f:id:tooooomin:20140723100439p:plain

Modifier

f:id:tooooomin:20140723100432p:plain

CSS設計の教科書p73

MCSS(日本語ドキュメント参照)

  • Foundation
  • Base
  • Project
  • Cosmetic

FLOCSS

  • Foundation
    • reset.cssやnormalize.cssなどの初期化
    • プロジェクトnおける基本的なスタイル(全体の背景・フォント等)
  • Layout
    • ヘッダー・メイン・サイドバー・フッター等の共通コンテナーブロックの定義
    • (グリッドのように汎用的に使われるコンポーネントはObjectレイヤー)
  • Object
    • Component
      • 汎用性が高く、再利用できるもの。
      • 最低限の機能をもったものとして定義し、固有の幅や色は持たない
    • Project
      • オブジェクト固有のパターン
      • コンテンツを構成する具体的な要素
    • Utility
      • CompornentとProjectレイヤーのMoodifierで解決することが難しい・適切で無いスタイルの調整

参考

自分が思い出せるようの簡易メモなので、詳しくは下記の書籍よ読んでください(*´ω`*)