実際にブログのテンプレートを作ってみるにつけ、いくつかさらに考えたことのメモなど。
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」と考えればそれでいいのかもしれないが……。
