質問: cssファイルの管理方法でアドバイスをください。 私はサイト制作初心者です。 現在、ページ数がおよそ30pのサイトをレスポンシブwebデザインにて制作しております。 とりあえず制作を・・・とおもい管理のし易さを無視してたった6つのcssファイルだけで構成しているのですが、横幅毎のcssファイルがとてつもなく膨大な記述量になってきました。 各ページ毎にちょっとした演出やデザインを入れていいたら、結果すごい記述量に・・・。 <現在のcss構成イメージ> import.css ↑base.css ↑device_1.css(数百行) ↑device_2.css(数百行) ↑device_3.css(数百行) ↑device_4.css(数百行) レスポンシブwebデザインのサイトなので、各デバイス用のcssファイルをimport.css内に@import"●●"という形で1つにまとめ、htmlファイルにはlink relでこのimport.cssだけを記述しています。 一応、全ページ共通のタグをできる限りbase.cssにまとめ、各ページ毎の個別cssファイルは作らず、デバイス毎という形で一括で記述していきました。 そうすると、あれよあれよと各デバイス毎のcssがものすごい記述量でカオスな事になってしまいました。 当然といえば当然ですが。。。 そこで、cssファイルを各ページ毎に分けるべきかどうか悩んでおります。 色々ネットで調べたのですが、『cssは分ければ分けるだけ読み込み速度が遅くなっていく!』というのを知り、さらに調べると『記述量が多くても読み込みが遅くなる』という事も知り、もう一体どうしたら良いのだろうか?とさらに悩やんでおります。 読み込み速度を優先して現状のままの構成でいくのか・・・ 管理を考えて個別にしていくのか・・・ お詳しい方々、ぜひアドバイスをください! お願いします!
回答: >cssは分ければ分けるだけ読み込み速度が遅くなっていく! それはとんでもないデマです。まったく逆です。スタイルシートは一度読んだら読みませんのでね。しかも、必要なものしか読まないのですから。 私は、スタイルシートを次のように分けています。 media別スタイルシート [固定(persistent)スタイルシート]・・・すべてで適用させる基本的なもの rel="stylesheet" title属性なし。 [優先スタイルシート] rel="stylesheet" title="標準" [代替スタイルシート] rel="alternate stylesheet" title="大きなフォント" そして、それぞれに default.css サイト全体で統一すべきもの shape.css 配置 color.css 色 そして、ページのデザインカテゴリーごとに toppage.css カテゴリー(テーマ)のトップ content.css 各コンテンツ document.css 文章がメイン(会社案内、マニュアルなど) を必要に応じてで呼び出しています。 @importは基本使いません。不必要なものまで読ませてしまうので・・ 各ページ独自のスタイルは、内に追加しています。個別の要素のスタイルはstyle属性を使用します。 それよりも、問題なのはスタイルシートの整理です。 >ものすごい記述量でカオスな事になってしまいました。 それでメンテナンスできますか?他人が見てわかりますか? 1) html自体の書き方に問題がある場合がある。 文書構造をきちんと示しているか? リンクやjavascriptのターゲットでもないのにidを使っていないか? 2) セレクタのグループ化、簡略化プロパティをきちんと利用しているか 3) 継承されるプロパティを何度も記述していないか? 4) 詳細度やカスケーディングをきちんと利用しているか? スタイルシートは、よほど派手な装飾をしても、せいぜい数百行で収まるはずです。私の場合 default.css 100行 shape.css 200行 color.css 150行 程度を目安にしています。 記述順は 1)タイプセレクタ 2)大きなブロック(.header,.section,.footer,.nav) 3)より小さなブロック(class) 4)一意セレクタ 5)より細かい部分 と記述していきます。 たとえば、 html,body{margin:0;padding:0;} body{background:;font-family:;} h1,h2,h3,h4,h5,h6,p{margin:0;line-height:1.6em;} div.header,div.section,div.footer{width:70%;margin:0 auto;min-width:480px;max-width:800px;} div.nav ol,div.nav ol li{display:block;list-style:none;marin:0;padding:0;text-align:center;line-height:2em;} ・・・・・ #sitemap{width:100%;position:absolute;top:0;left:0;height:2em;} #sitemap ol li{dispaly:inline-block;width:20%;} というふうに・・・htmlを見なくてもスタイルシートが書けますし、あなたでも見ただけでなにを指定しているかわかると思います。 肥大化したスタイルシートを拝見すると、htmlに膨大なdivやidが書かれていることが第一の原因ですね。そもそも「divやspanにつけるidやclass名は文書構造を補完するため」あるいは「文書構造を補完するためにidやclass名をつけたdiv,spanを利用する」という基本ができていないのではないでしょうか? 『div要素とspan要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 ヘッダーなら、,本文なら、、ナビゲーションならのように、html5の新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/tr/html5-diff/#new-elements )を参考につけておくと良いでしょう。将来、そのまま → → → にできますし・・ >横幅毎のcssファイル レスポンスデザインでなぜこれほど増えるのかわかりません。ウィンドウ幅の違いを吸収できるからレスポンス/リキッドデザインなのですよ。 div.header,div.section,div.footer{width:70%;margin:0 auto;min-width:480px;max-width:800px;} の指定で、480px幅以上のディスプレイはすべて対応できるはずです。