SCSSファイルの整理をしてた。Sass 3.2を使い始めて以降、%セレクターをとりあえず使ってみる感じが多かったけど、ようやくどういうものに使うべきでどういうものに使うべきではないのかがわかってきたような気がする。というわけで現在のこのWebサイトのスタイルの構成のメモ。
関数はどこで使われるかわからずプライオリティが高いので最初にインポート。それから変数を定義して、それを使ってスタイルを書いていく。Webフォントは変数のところでインポートして定義するようにした。Sass 3.2ではCSSの@importディレクティブを自動的に先頭に移動してコンパイルしてくれる機能があり、Google Web Fontsを@importディレクティブで使う場合でも特に位置を気にする必要がなくなったのでどこでも大丈夫(今は使ってないけど)。
汎用的な使いまわすスタイルやミックスインが含まれるSCSSライブラリ(partialって言うのわかりにくいのでライブラリって呼ぶことにしたい)を以前は上記関数定義などと並行してインポートしていたけど、必要になったらその時にインポートするような運用に変えた。定義元の参照を楽にすることが最大の目的。同じSCSSライブラリを複数回インポートとかも気軽にやってる。
これはSass 3.2で使えるようになるCSSには出力されない特殊なセレクターで、スタイルを意味づけしてまとめ@extendすることができるようになる。見出しや段落間のマージンなど使い回しできるものをザクザク作っておき、この後のSCSSファイルで@extendしまくるという書き方でやっている。SCSSライブラリで定義しているclearfixや画像置換のミックスインはここで一旦プレースホルダー・セレクターでラップしてやると効率良く使いまわせたりもする。ここらへんの話はその内書きたい。
@extend使いまくりはセレクター数が飛躍的に増えてしまうので、この運用には問題があるような気がしないでもない。ただ、セレクターの数の増加は実装上のバグにハマるというものでしかなく、Sassの書き方でそれを回避するのは本質的な解決方法ではないと思うので、別のレイヤーで処理した方が良いんじゃないかなーという感じ。微妙なところ。
IDやクラスへのスタイルと素のHTML要素へのスタイルがまぜこぜになっているとややこしいのと、長いブロックができやすいことから素のHTML向けのスタイルは独立させるようにした。そうするとnormalize.cssとも混ぜやすく、セレクターの節約につながる。
後述のページを構成する要素と同じようにレイアウトは分離した方が良い気がしているけどまだやっていない。normalize.cssとの兼ね合いもあるので大変そう……。
ページを構成する……とは大まかなセクション、つまりヘッダーやコンテンツ、フッター、あるならサイドバーなどのこと。これらへのスタイルはページ全体の印象を決定づけるものなので、比較的複雑なものになりやすい。なのでおおまかにデコレーションとレイアウトで分けて別々にインポートするようにした。調整しやすいけど、セレクターが重複するのが難点。
レイアウトにはロゴの高さとかフッターのアイコンのサイズとか……ではなく、おおまかな配置を決定するスタイルだけが含まれる。カラム分けや最大幅の制限、余白の確保などが主なもの。意図したレイアウトにするための最低限のスタイルだけを抜き出したものとも言える。
デコレーションはレイアウトに含まれないもの全てで、フォントの指定や色、背景画像の指定などが主に含まれる。ロゴやナビゲーション、フッターの基本的なデザインはこちらで決定することになる。そのためレイアウトに影響を与えるとは言え、ロゴの高さやフッターのアイコンのサイズはこちらで指定している。
検索フォームやページングなど、マークアップがしっかりしていればスタイルがなくてもある程度は機能するような補助的なものについては最後にまとめて指定する。インポートしなくても大丈夫！ くらいのプライオリティが低いもの。
関数と変数のインポート以外はどれを消してもそこそこ見れるような感じのCSSが生成されるようになるのが理想なんだけど、まだまだその領域には達することはできていない。それでもまぁ5合目くらいまでは来たんじゃないかなーと。