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
Modifier
CSS設計の教科書p73
MCSS(日本語ドキュメント参照)
- Foundation
- Base
- Project
- Cosmetic
FLOCSS
- Foundation
- Layout
- Object
- Component
- 汎用性が高く、再利用できるもの。
- 最低限の機能をもったものとして定義し、固有の幅や色は持たない
- Project
- オブジェクト固有のパターン
- コンテンツを構成する具体的な要素
- Utility
- CompornentとProjectレイヤーのMoodifierで解決することが難しい・適切で無いスタイルの調整
- Component
参考
自分が思い出せるようの簡易メモなので、詳しくは下記の書籍よ読んでください(*´ω`*)
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
- 作者: 谷拓樹
- 出版社/メーカー: インプレスジャパン
- 発売日: 2014/07/24
- メディア: 単行本(ソフトカバー)
- この商品を含むブログ (1件) を見る