- 作者: 原田騎郎,吉羽龍太郎,松浦隼人,須藤涼介,生沼一公,森下雅章,前島真一,鍛治匠一,伊藤直也,のざきひろふみ,うらがみ,高山温,佐々木健一,わかめまさひろ,ひげぽん,遠藤雅伸,海野弘成,はまちや2,竹原,藤田正訓,WEB+DB PRESS編集部
- 出版社/メーカー: 技術評論社
- 発売日: 2016/06/24
- メディア: 大型本
- この商品を含むブログを見る
OOCSSとBEMについての説明があったのが良かったです。
他には、スタイルガイドツールのHologram、Radimu、cssnext、CSS Modulesなど。
CSS Modules も含めてCSS in JSってどうも違和感があります。
ローカルスコープが実現できて一見良さそうなんですが、
JS側（View）とCSSが1対1になるのが前提に設計されてますが、
はたしてそうなんだろうかという気がします。
CSS in JS が良いのか、グローバルスコープやむなしとして、OOCSSとBEMなどの設計で乗り切るのが良い道なのか、よくわからないなという印象。
OOCSS
BootstrapやFoundationなどで利用されている設計指針。
「構造と見た目の分離」、「コンテンツとコンテナの分離」という2つの原則が存在する。
「構造と見た目の分離」は、Bootstrapを例にすると
構造はbtn、見た目はbtn-successなどで定義されている。
「コンテンツとコンテナの分離」は、CSSはHTMLの構造に依存しない
BEM(Block, Element, Modifier)
Block: ナビゲーションバー、フッター、検索フォームなど
Element: Blockを構成する要素。Elementの中にElementは存在しない（その場合はBlockの可能性がある）。
Modifier: BlockやElementの装飾パターンや状態を示す。
命名規則
Elemetnの直前にはアンダースコアを2つ。
Modiferの直前にはアンダースコアを1つ。
MindBEMding という広く使われている記法では
Elementの直前にはアンダースコアを2つ。
Modifierの直前にはハイフンを2つ。
Radium
Reactで利用される CSS in JS の欠点を補うツール。
メディアクエリや擬似要素、:hoverなどの擬似クラスにも一部対応。
