ページごとのCSS

HTTPS＋HTTP/2時代なのでCSSを連結しなくても大丈夫だよ、といった風の記事をよく見るようになった。僕はそういった推測や検証は概ね間違っていると考えている(そのうち検証したい)のだが、一方で小さいウェブサイトではそれなりにうまくいくとも考えている。まずは色々やってみようと、このウェブサイトでCSSを論理的な単位で作るように(分割するわけではない)した。

論理的な単位といっても、ウィジェットごとにCSSを作るのはいかにも小さすぎると感じた。様々なツールもそのような利用の仕方を想定されていないため、それぞれのウィジェットで同じコードを何度も書く必要が出てきたりもするだろう。そういうものをうまくまとめても結局はそのまとめたものを参照するコードが必要になる。

感覚としてはページ(の種類)ごとくらいに分けるのがわかりやすそうだ。例えばウェブログの記事ではこの3種が読み込まれることになる。

パーマリンクで使うスタイルには、画像の特殊な配置や脚注、プルクォートなど、ウェブログの記事を書く上で使うものが含まれる。これらは本当にパーマリンクでしか使われないため、違うページ、例えばホームではpermalink.cssの代わりにhome.min.cssが読み込まれ、それでは記事一覧などのスタイルのみが含まれることになる。permalink.min.cssとhome.min.cssは一部重なるスタイルもあるが、無駄ということにはならないのでそういうものということで良いだろう。

それぞれはSassを使って作られる。

/*!
 * permalink.css
 * https://github.com/hail2u/hail2u.net-styles
 *
 * Licensed under MIT: http://hail2u.mit-license.org/2011
 */

@import "init";

@import "content/first-heading-permalink";
@import "content/section-footer-permalink";

@import "widget/bordered";
@import "widget/drop";
@import "widget/fill";
@import "widget/float";
@import "widget/footnote";
@import "widget/pull-quote";
@import "widget/read-older";
@import "widget/seealso";
@import "widget/sidenote";

ウィジェットは他で使われる可能性もあるため、このようなエントリーポイント的なファイルがどうしても必要になりそうだ。逆に絶対共有しないのであればここに書いてしまうのも良いかもしれない。ここでは共有するユーザー定義関数や変数、プレースホルダー・セレクターをまとめてある_init.scssをまずインポートする。そうしないと続くウィジェットがうまく処理できない。改めてページごとに必要な(必要になりそうな)ウィジェットのみをインポートする。

仕組みとしては特に難しいことはないだろう。このウェブサイトでは印刷用CSSを完全に分けているので、HTMLでのCSSの参照は少し変わった形になっているが、普通はそこまで考える必要もない。

既にいくつか考えられる問題はある。

最も大きいのはパフォーマンスの向上がコードの煩雑さに見合うものなのかというような点だ。今のところウィジェット間で共有したいものの管理で無駄としか考えられないような作業が膨大に必要とされ、かなり手間がかかる。規模によっては致命的な作業量になりそうだ。もっと単純なCSSから複雑なCSSまでこのような書き方をしてみないと、煩雑さが避けられないものかどうかは判断できないが、あまり期待はできないような印象だ。

もっとコードの面から見た場合、セレクターの書き方次第ではメディア・クエリーの適用順序の問題が浮上する。そうなるとBEMであったりといったいわゆるモバイル・ファーストのCSSコードを前提とした、直列なクラス名管理手法はうまく機能しなくなるかもしれない。

また、僕が大きなウェブサイトではあまり機能しないと考えているのは、こういったCSSの並列リクエストといった考え方がまったく通用しないと考えているいうわけではない。大きなウェブサイトではパフォーマンスが第一であるべきで、それを考えるなら連結したCSSをサーバーの仕様やスペックに従い最適なサイズに機械的に分割した方が効率的なのではないかと想像しているからだ。

ひとつのファイルで完結するCSSを意識して10年以上CSSを書いてきたので、まずはその精神構造から修正していかないとならない。そう考えると道のりはかなり厳しいもののように思える。yui-reset.cssやyui-font.cssなどのようなものと自分のウェブサイト用のCSSを組み合わせて使っていた感覚を思い出しつつ、それを特化型かつ汎用的に構築していくような意識を持たなければならない。