同じ事をくり返し言うことが多かったような気がしますが、とりあえずはこれで今回の講座は修了です
目標にたどり着くまでの段取りが長くなってしまったので、実例まで読まないと分かりにくいものだったかもしれません
@importを使いまくるこのアイデア、基本は自分が考えついた物ではなくて、人のサイトのソースを見ながら、良い物をパクって作った物だったりするのですが…
あらかじめ書きためたスタイルシートを、テンプレートとして活用すると、作業時間も早くなりますし、可読性も上がりますので(変更する必要のない、あたりまえの設定を見なくて済むから)
一応欠点も上げておくと下の様な物が考えられます
- 読み込むスタイルシートの合計サイズが増える
- テンプレートの範囲内でしかデザインできないので、設定色数が減りがち
- サイト全体のデザインが統一されがち
- とにかく最初に作る物が増える
現実問題、代表的なブラウザでもCSS2のセレクタは安心して使用できる程普及していませんので、この方法もある程度妥協の必要があります(ul > li
とかしないで ul li
で設定しておく、h1 + div
とかやらないでdiv.クラス名
で解決する、@import文で作る階層を増やしすぎない等)
とにかく、「うぉー、CSS見にくい、メンテしづらい〜」という方の救いになれば幸いです