OOCSS(Object Oriented CSS:オブジェクト指向CSS)
- 元・米Yahoo!のデベロッパー ニコール・サリバン氏が提唱
- １つのまとまったHTML、CSSないしはJavaScriptで書かれた独立したスニペットとして再利用できるものをOOCSSではオブジェクトとして定義している（CSSオブジェクト）
- パーツを組み合わせて作るマルチクラス設計とも言える
原則
- 構造と見た目の分離
コンポーネントの基本構造と具体的なルール・機能を分離する（基本構造+バリエーション） - コンテナーとコンテンツを分離
場所に依存しないセレクタで書くということ（#header p a{} など意味のない場所依存は再利用しにくいためよろしくない）
SMACSS（Scalable and Modular Architecture for CSS）
- 元・米Yahoo!のジョナサン・スヌーク氏によってOOCSSのコンセプトをベースに作られたフロントエンドに関するガイドライン
- 5つのカテゴリー（フォルダ）に分けて設計する考え方
カテゴライズ
- Base
- Layout
命名規則：クラス名の頭に"l-"という接頭辞をつけることを推奨 - Module
- State：状態（JSなどでの変化する箇所など）
命名規則：クラス名の頭に"is-"という接頭辞をつけることを推奨 - Theme
BEM(Block Element Modifier)
- ロシアのYandexが考えた開発手法で使われている命名規則
- クラス名の命名規則が特徴的
命名規則(MindBEMding方針)
Block__Element--Modifier
他のCSS設計（MCSS）
- Multilayer CSS
- 複数のレイヤー構造をもとにしてCSS設計するアプローチ
レイヤー
- Foundation
- Base
- Project
- Cosmetic
まとめ
OOCSSの考えをベースに、ディレクトリー構成はSMACSS、クラス名はBEMというように、
案件によって適切な設計を考える必要がある。
参考文献
- 『Web制作者のためのCSS設計の教科書』（インプレス）