こんにちは。かずです。
自分はCSSを書くとき、今更ながらFLOCSSをベースにして管理しています。
foundation、layout、componentなどに分けて、役割ごとにSCSSファイルを置いていく。
作っている最中は整理しやすいですし、どこに何を書くのかもある程度決められます。
ただ、ファイルが増える分、自分でもたまに見失うことがあります・・・
作っているときは分かりやすいけど・・・
構築中は、それほど困りませんでした。
ヘッダーならlayout、共通で使うパーツならcomponent。
自分なりのルールも決めているので、新しくコードを書くときはそこまで迷いません。
ファイルも細かく分かれていて、整理されている感じがあります。
問題は、完成してからです。
ブラウザで確認しながら細かいところを直していると、これどのファイルだっけ？となることがあります。
特に迷ったのが、下層ページにあるカードでした。
共通パーツとしてcomponentにあるのか、そのページでしか使わないからpage側にあるのか
どちらでも間違いではないんですが、こういうものが増えてくると、だんだん自分でも迷ってしまいます。
ファイルとディレクトリが増える
自分の場合、一番困ったのは単純にファイル数とディレクトリ数が増えることでした。
整理するために分けているはずなんですが、分ければ分けるほど探す場所も増えます。
作った直後なら覚えています。でも少し時間が経ってから触ると、普通に忘れます。
自分で作って、自分で探す。本末転倒なのでは。
今はなるべくわかりやすく
共通パーツ以外はなるべくpage.scssにまとめるようにしています。
そのページでしか使わないものなら、とりあえずpage.scssを見ればいい。
自分の場合はこのほうが修正しやすいです。
共通で使うものだけcomponentに分けて、それ以外は無理に細かくしすぎない。
今はそのくらいでいいかと思ってます。
FLOCSS自体は使いやすい
とはいえ、FLOCSSをやめたいわけではありません。
自分以外の人が編集するときでも、役割ごとに分かれているので割と見やすいと思います。
全部をひとつのファイルに書くより、どこに何があるのかは追いやすい。はず。多分。
なので、今後も似た構成にはすると思います。
ただし、componentをどこまで細かく分けるかは、もう少しじっくり調整したいです。
おそらくまた変わる
今の段階では、共通パーツはcomponent、それ以外はなるべくpage.scss。
この形が自分には合っていそうです。
とはいえ、またサイトを何個か作ったら考え方が変わるかもしれません。
そのときはそのときで、また変えればいいかなーと思ってます。
それでは！
JOURNALが気に入ったら「いいね」してね！
