Nakkan Base

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はしょっちゅう書き換えるもの。

分かりやすいのが一番だ。

★GitHub -hiloki/flocss

★FLOCSSでのCSS設計

★FLOCSSにおけるComponentとProjectの違いにつて超分かりやすく解説してみた

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

*

CAPTCHA