CSSファイルが3000行になっていて辛かったです。
Chrome先生のDeveloperToolでみてみると1ページあたり90％くらいは利用されていませんでした。
目標
- 不要なスタイルシートをを読み込ませない
- 保守性を上げる
※ビューとコントローラが分割されているフレームワーク限定
利用するもの
- compass
- scss(sass)
compass, sassについては下記を参考にさせていただきました。
CSSの常識が変わる！「Compass」、基礎から応用まで！
http://liginc.co.jp/designer/archives/11623
コントローラで読み込むCSSファイル名を指定しビューに渡す変数に格納する。（ここではデフォルトでコントローラ名と同名のCSSファイルを読み込むよう指定しました）
compass create assets
compass watch
これでassets/sass内のscss,sassファイルが更新された時自動でコンパイルされ、assets/stylesheets内にcssファイルとして書き出されます。
例ですが、ファイルを下記のような形で配置
assets
assets/sass
assets/sass/_base.scss
assets/sass/_common.scss
assets/sass/controller1.scss
assets/sass/controller2.scss
assets/stylesheets/
…
_base.scssには要素リセット等のスタイルシート、
_common.scssには各ページに共通で使用するスタイルシートが入っています。
controller1.scssを指定した時。
@import 'base';
@import 'common';
/* controller1で使用するスタイルシート */
html内のスタイルシート読み込み
<link rel="stylesheet" href="/assets/stylesheets/[コントローラでCSSファイル名を指定した変数].css" type="text/css">
これで該当ページに使用していない大量のCSSは排除され、保守性を上げつつ、読み込まれるCSSファイルは1枚にまとまりました。
デメリット
- 出力される各CSSファイルはbase, commonに記述されている内容も含むため大量にダブります。 特に問題ありませんが、ちょっと気持ち悪いと思いました。
- すべて1枚にまとめていた時はトップページを開いた時にキャッシュされ、以降のページ遷移でもキャッシュが利用されるかと思いますが、この方法だとページを移動した時に読み込まれるファイルが違うのでキャッシュが利用できません。（2度目以降のアクセスなら可能ですが…）
まとめ
自分で作っておいてなんですが後者のデメリットが大きい気がします。
それならいっそimportせずにbaseとcommonは最初の1ページ遅いの覚悟でキャッシュさせて、以降のページはコントローラ毎とかにすればと。
サイト内のユーザーの動きにもよるので万能ではないです。
なので半分どころかかなり失敗です。
これはと思ってメモし始めてみたものの自分で書いていて悲しくなってきました。
何か良い手はないものか…