こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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は分ければ分けるだけ読み込み速度が遅くなっていく!』というのを知り、さらに調べると『記述量が多くても読み込みが遅くなる』という事も知り、もう一体どうしたら良いのだろうか?とさらに悩やんでおります。

読み込み速度を優先して現状のままの構成でいくのか・・・
管理を考えて個別にしていくのか・・・

お詳しい方々、ぜひアドバイスをください!
お願いします!

投稿日時 - 2012-11-12 00:56:37

QNo.7793385

困ってます

質問者が選んだベストアンサー

>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 文章がメイン(会社案内、マニュアルなど)
 を必要に応じて<link>で呼び出しています。

@importは基本使いません。不必要なものまで読ませてしまうので・・

 各ページ独自のスタイルは、<head></head>内に追加しています。個別の要素のスタイルは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 )』
ヘッダーなら、<div class="header">,本文なら、<div class="section">、ナビゲーションなら<div class="nav">のように、HTML5の新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )を参考につけておくと良いでしょう。将来、そのまま
<div class="header">→<header>
<div class="section">→<section>
<div class="nav">→<nav>
にできますし・・

>横幅毎のcssファイル
 レスポンスデザインでなぜこれほど増えるのかわかりません。ウィンドウ幅の違いを吸収できるからレスポンス/リキッドデザインなのですよ。
div.header,div.section,div.footer{width:70%;margin:0 auto;min-width:480px;max-width:800px;}
 の指定で、480px幅以上のディスプレイはすべて対応できるはずです。

投稿日時 - 2012-11-12 08:40:16

お礼

ご回答ありがとうございます。

-----------------------------------
>cssは分ければ分けるだけ読み込み速度が遅くなっていく!
>それはとんでもないデマです。まったく逆です。・・・

!!!!
そうなんですか!?あれ!?ってなると・・・。これでまたいくつか疑問が浮かんできました・・・。
それは別件でまた質問してみますので、もしご覧になったら、ぜひご指導ください。


-----------------------------------

>たとえば、
>html,body{margin:0;padding:0;}

最近、気になるサイト様のソースを拝見したりすると、ORUKA1951様と同じように記述してあります。
確かに意味はわかるのですが、初心者的発想なんで、これがものすごい見づらい!メンテしずらい!と思い、このような↓記述をしておりました。

(同じタグで表現すると)

html
 {
 margin: 0;
 padding: 0;
 }

body
 {
 margin: 0;
 padding: 0;
 }

と、このように。ぱっと見はこれのがメンテしやすそうだったためこう記述していたのですが、やはりスペース類は全部端折ってギリギリまで簡素化し、同じ内容ならまとめて記述したりする事を目指すべきなんでしょうか?
現状が上記のような記述なので、ORUKA1951様と同じようにすれば、1つ1つに細かすぎるぐらいコメントをつけていたりも合わせてしていたので、ゆうに4分の1には行数が減りそうです。


-----------------------------------

>横幅毎のcssファイル
>レスポンスデザインでなぜこれほど増えるのかわかりません。ウィンドウ幅の違いを吸収>できるからレスポンス/リキッドデザインなのですよ。
>div.header,div.section,div.footer{width:70%;margi・・・・

な!!!なるほど!言われてみれば確かに!
リキッドレイアウトしてるのに、わざわざcssを変えて余計な手間をかける必要はないんですよね!!!そうだそうだ!
サイト構成が大きくかわるのなんて、確かにスマホの縦用サイズになった時だけですし・・・。
この発想はありませんでした・・・。


-----------------------------------

大変、大変参考になりました!!!
私のような未熟者に、ここまで懇切丁寧にご教授頂き、大変感謝いたします。
ありがとうございます。

投稿日時 - 2012-11-12 19:26:24

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

・device_1環境
import.css
 ↑base.css
 ↑device_1.css(数百行)

・device_2環境
import.css
 ↑base.css
 ↑device_2.css(数百行)

・device_3環境
import.css
 ↑base.css
 ↑device_3.css(数百行)

・device_4環境
import.css
 ↑base.css
 ↑device_4.css(数百行)

とすれば、
管理もしやすそうですし、各々の環境での総読み込みサイズを減らせるんじゃないでしょうか。

投稿日時 - 2012-11-12 09:31:10

お礼

ご回答ありがとうございます。

なるほど!こういう分解もあるんですね!!
とても参考になります。

うう~~~~~ん、考えれば考えるほど、初心者のボクからしたらすごく効率的なワケ方です!!!
貴重なご意見、ありがとうございます!

投稿日時 - 2012-11-12 19:26:28

あなたにオススメの質問