#Object Oriented CSS
##なぜ
CSSにも再利用性が必要だから。
要素に直接スタイルを振るとh2がh3になったら効かない。
##構造と見た目の分離
構造・・・幅・高さ・テキスト揃え
見た目・・・色、フォントサイズ、角丸
##BEM
(長いけど)明瞭な命名規則でコンポーネントを分ける。
Block・・・高レベルに抽象化されたコンポーネント
Element・・・Blockの子孫
Modifier・・・異なる状態
###命名
.Block__Elemnt--Modifier
.site-search //単語区切りはハイフンひとつ
.site-search__field
##SMACSS
ベース、レイアウト、モジュール、ステートなどで分ける。
詳しくは知らん。
##FLOCSS
ぱっとみで本命っぽいのでこれを使う。
BEMの命名とSMACSSの思想のいいとこ取り。
Foundation・・・reset.cssなどのベース
Layout・・・header/main/side/footer
Object・・・その他
- Component・・・grid/button/formなどの汎用部品
- Project・・・articles/entryなどのプロジェクト固有の部品
- Utility・・・それ以外の細かなスタイル・CとPを汚さないために。
###命名
基本的にはBEMと同じで
####Layout
.header
.main
など
####Component
.c-button
.c-button--disabled
####Project
.p-entry
.p-entry__title
.p-entry__title--sub
####Utility
.u-clearfix
####State(正式にはないけど)
.is-active