読者です 読者をやめる 読者になる 読者になる

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

WEB+DB PRESS Vol.93

WEB+DB PRESS Vol.93

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などの擬似クラスにも一部対応。