今年のネーミングルール #CSS設計

CSS Architecture Advent Calendar 2014 1日目の記事です。 CSSの設計をしていく上で大事なネーミングルール。 今年僕が関わったプロジェクトでのネーミングルールをゆるく紹介したいと思います。 こうやって名前をつけてました。基本となる設計思想はBEMです。 BEMについては、 CodeGrid を御覧ください。 ネーミングルールを決めるとき、区切り文字をハイフンかアンダースコアか、それとも混在か悩みましたが、とりあえず以下の様なルールでやっていくことにしました。 /*css*/ [Prefix] - [Block] - [Element] -- [[Modifier-Key] - [Modifiler-Value]] { /* Rule Set */ } 一つ一つ解説していきます。 Prefixまずは接頭辞です。 接頭辞としてプロジェクト名や世代などを付与

[JHashimoto]

“基本となる設計思想はBEMです。 BEMについては、 CodeGrid を御覧ください。”

[sagaraya]

cssはスコープがないからobjective-cみたいにプロジェクト名のprefixつけるのよさそう。リニューアルも考慮されてて参考になる

[efcl]

CSSセレクタのネーミングルール。 prefix-BEMライク。 リニューアルの際はprefixを変更する手法

[ku_marin]

毎回悩むので参考に

[nibushibu]

自分も一時期Modifierは --type-1とかにしてた。今はさらに縮めて --1 になってる。.class-1--1 とか 数字が連続してちょっと見た目気持ち悪いけど。

[kkeisuke]

“BEM”