こういうふうに書きたい、こうしたいという原則と、その問題点。
理想と現実の間で苦しむかんじのポエムです。
原則ルール
- 命名規則はBEMを使用
- FLOCSSルールでファイル分割
ざっとこんなかんじでやっているけど、いくつかうーんってなるポイントがあるので俺俺でどう解決するか。
気になる問題
FLOCSSのProjectとComponentとLayoutでclass名が衝突する可能性
もともとProject/Component/Layoutは別フォルダに入れるルール。
でもファイル名＝class名とすることで強制的にclass名の重複を防げるような状態にしておきたい。たまにやらかすので。
対応としては「プレフィックスをつける」が最も無難、というか他に対応が思いつかない。
あとFLOCSS原典的にはLayout要素はidを使用するルールだけど、これも無視してclassを使用したほうがいいと思う。
#Layout .Component {hoge}というような書き方をしてしまうと他からの上書きが困難になってしまう。文字通りの意味で優先度のケタが違うので、IDは本当に、本当に極力使いたくない。
Modifier
扱いが度々問題になるやつ。一概にこうと言えなくて非常に悩ましい。
原典BEM: .hoge_hoge-hoge
やだ。つらい。
jsからの変更がめんどくさいし、css書くのもだるいし、明確なこと以外あんまり利点がない。
プレフィックスをつけたclassで対応
js-をプレフィックスにしてしまうとjsとは無関係なModifierが出てきたときに困るので、md-のようにModifierであることが明確なプレフィックスがいい。
マルチクラスであることを許容するなら今のところこれでいいかな、と思う。
カスタムデータ属性に持たせる
この記事で言及されていたやつ。
よさそうなんだけど、ニョキニョキ好きなデータ属性生やしまくってもトラブりそうな予感もするし、cssのためのデータ属性であことを明確にするためやっぱりプレフィックスは欲しい。
問題としては、知らない人からすれば珍妙な書き方になるので人に見せたとき直感的にわかって貰えない可能性があること、現状ではjsから操作するのにちょっとコツがいること。
福数人で編集する場合は特に注意が必要で、しっかり意思疎通ができないと厳しい。
結局どれがいいのか
カスタムデータ属性に持たせてしまうのが楽だと思うので、一人でやるか、きっちり意思疎通できる環境ならカスタムデータ属性に持たせてしまうのが理想。
でも残念ながら自分の環境では人の出入りが激しいので、プレフィックスをつけたclassでマルチクラスにしてしまうのが無難かなあ。
Projectが入れ子になってしまったとき
あるいはblock入れ子問題。
極力避けてもProjectAの中にProjectBが入ってくるというような状況はどうしても発生してしまう事があって、しかもAの中にあるBだけにmarginを変更したいなんていうケースはある。望ましくないのはわかっていても、極力避けても、現実問題として発生する。
そうなったとき、どこにその指定を持たせるのがいいのか。
marginくらいの簡単な指定であればProjectA側に持たせてしまっていいかもしれない、と思った。最初は。widthとかもまあぎりぎり。
でもbackground-colorの変更やborderの変更になるとちょっと怪しいし、そこまでいったらProjectBのModifierに持たせたほうがいい気がする。とはいえ動的に出力したりする場合、それも難しかったりするが。
親側、ProjectAから指定できるのはmargin、widthのみとして、それ以上の変更が必要な場合はProjectBのModifierに、Modifierに持たせるのが難しければProjectBのファイルの中にProjectAの名前を書く、くらいしかない。多分。
ここ、よくすごく迷ってしまうし現状で的確な答えが出せずにいるので、人がどうしているのか知りたい。
汎用class
使わないのが理想だなんてことはわかっていても必要な事がある、それが汎用class。切ない。
汎用classを何故避けるかといえばメンテナンス性が下がるからなんだけど、汎用classを避けるためにcssが肥大化しすぎてもやっぱりメンテナンス性が下がるので大事なのはバランスだ。と自分に言い聞かせている。
1つしかない例外的処理の場合にはもう諦めて使ったほうがよい。ただし同じ要素に2回同じ汎用classをつけることがあればそれはもうModifierにするべき。
余録だけど経験上、margin以外の、とくにfont-sizeやcolorに関してはあまり定義しないほうがいい。せめてspan.red{}というような形で定義したほうがいいと思う。使いまわす前提のProjectの一部に汎用classを組み込む人、居ないと思いきや割と居る。