WEB+DB PRESS Vol.93 [詳解]モダンCSS

作者: 原田騎郎,吉羽龍太郎,松浦隼人,須藤涼介,生沼一公,森下雅章,前島真一,鍛治匠一,伊藤直也,のざきひろふみ,うらがみ,高山温,佐々木健一,わかめまさひろ,ひげぽん,遠藤雅伸,海野弘成,はまちや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などの擬似クラスにも一部対応。