FLOCSSについて
CSS設計の核となるFLOCSSについて。
最初の頃は、これに本当に翻弄された。
意味は分かるけど、どうやって使ったらいいのかが分からない。
それで谷氏の著作も読んだし、『柴犬でも分かるFLOCSS』も購入したが、やっぱりおそらく私がバカなせいで釈然としなかった。
「これは実際に使ってみるしかない」と覚悟して、テキストエディタに向かったものだ。
要するに、idとかclassとかに「l-」「p-」「c-」など付けて区別しちゃえばいいってこと。
結果、一つのclassにたくさんの名前がついたりする。
例えば<div class=”p-line c-line”>とか。
「何だ、それでいいんだ」と拍子抜けしたような気持ちになったっけ。
けどこれで結構「ComponentかProjectか?」などと迷う時間が長くなったことと、コードがぎっしり一杯になってしまったことで、「果たして本当にFLOCSSは必要なんだろうか?」という思いになったことも事実だ。
さらに、WordPressに移行したときに、WordPressが勝手に新しいclassをつけてくるので、あれだけ気を遣って構築したcssが総崩れになってしまうことだってあり、ブロックエディタでギャラリーを使おうものなら、せっかくつけたclassは全部なくなる。
で、結論。
FLOCSSにこだわるのは時間と労力の無駄。
でも、ある程度分けた方が便利なのは事実なので、「FLOU」にするとか「FLO」にするとか、大きく分ければいいと思う。
私は最近は、classの接頭詞はつけず、Foundation/Layout/Projectの三つに分けている。
とにかくcssやscssはしょっちゅう書き換えるもの。
分かりやすいのが一番だ。
