Because We Love Happy Coding

フリーライターからエンジニア × 講師。発信力だけあり余ってる感じ

FLOCSSに関する試行

今日もまたコーディング。だって僕らはHappy Codingが大好きだから。

実際にブログのテンプレートを作ってみるにつけ、いくつかさらに考えたことのメモなど。

idとclass

参考にしたサイトは、詳細度が重すぎることを理由に、idよりclassを使用することを推奨している。概ねCSSの世界ではidに装飾することはあまり重視されていないようだ。

しかしサイト内に確実に一つと思われるlayoutクラスについては、積極的にidを使うことにした。再利用ができなくなるけれど、layoutはそもそもあまり再利用を前提にしていないし。

ファイル名との乖離

実際のところ、ファイル名はわかりやすくさえあれば、中に入っているクラス名と一致している必要がない。

基本的にBEMでいうBlock名をファイル名にしておいた方がわかりやすいのは間違いないが、多少の接頭辞などが違っても問題にならない。

再帰的なCSSの構造

objectはその下位要素をアンダースコア二つでつないでobj__componentのように持つんだけど、下位要素がさらに下位要素を持つ場合もあるわけで、あまり長々しくなるのも面白くない。

ulとliみたいなものはわかりやすく上位要素、下位要素と捉えられるけれど、divの入れ子みたいなものは、どこを上位として認識するかが難しい。

サンプルにあるファイルの削除

サンプルのファイルにはheader.scssがあるんだけれど、混乱してきたのでいったん、header.scss、footer.scssを削除した。

HTML5ではheaderやfooterは階層を変えて出現するため、「header」という括りで指定するのはあまり得策ではない。階層の違うheaderを一カ所で指定する必要はまるでない。

少なくとも最上位のheader.scssと、それ以下のheader.scssと階層を変えた定義をした方がよい。

「header.cssが指しているのは最上位のheader」と考えればそれでいいのかもしれないが……。