ＣＳＳの整理方法

質問

ＣＳＳの初心者です。
現在、「common.css」にて

***ＣＳＳ内表記***
--------------------
ページ名１
--------------------
td.xxx{
color:#ffffff;
font-size:10px;
}

----------------------
ページ名２
----------------------
td.yyy{
color:#ffffff;
font-size:10px;
}
***ＣＳＳ内表記終わり***

上記の様に１枚で整理しておりますが、
他に良い表記方法、整理方法はありますでしょうか？

１つのページ内に「td.」クラスが１０個ほどあります。
ちなみに「td.」クラス内の量が１０列ほど、
　　　　 ページ数は現在１０ページほどです。

他に書き方や、書き方の講座の良いＨＰがございましたら
教えて頂けますと助かります。
よろしくお願いいたします。

回答No.1

abril

「１つのページ内に「td.」クラスが１０個ほど」ある状態（×10ページ）なら、そろそろCSSを分割した方が管理がしやすいかもしれないですね。今後どんどんコンテンツが増えて行くかもしれないでしょうし。

色々考え方はありますが、一つのパターンとして（ファイル名は適当です）：

・common.css…サイト全体のどのコンテンツにも共通するスタイル部分のみを記述。例えば、ベースとなるフォントサイズやカラー、ヘッダー／メイン／フッター／ナビのレイアウト部分など。
・home.css…ホーム（トップページ）にのみに使用するスタイル。
・category_a.css…カテゴリAのコンテンツのみに使用するスタイル。
・category_b.css…カテゴリBのコンテンツのみに使用するスタイル。

といった様に。
※あくまで一例です。サイトの構造やメンテナンス性に対する制作者の考え方で分割の仕方は色々ありますので、これが最適、というわけではないです。

CSSを効率よく分割する事で、idやclass等を減らしたり親子関係を明記しなくても済む様になったりするので、CSS内のセレクタ及びHTMLのマークアップがすっきりするというメリットも期待できます。例えば、今まで一つのファイルにまとめて記述していた時は：

【カテゴリAでのみ使用する表のセルの色】
td.category_a {
background: #fcc;
}
【カテゴリBでのみ使用する表のセルの色】
td.category_b {
background: #ccf;
}

という様にclass名が被らない様に設定しなければなりませんでしたが、もしカテゴリAとカテゴリBで参照するCSSファイル自体が異なるのであれば単に：

【カテゴリAでのみ使用する表のセルの色】
td {
background: #fcc;
}
【カテゴリBでのみ使用する表のセルの色】
td {
background: #ccf;
}

という様にする事も可能となるわけです。

その上で、各カテゴリのHTMLファイルから直接参照するのは、そのカテゴリに特化したCSSファイルのみにします。例えば、ホーム（トップページ）のHTMLファイルからならhome.cssのみを参照します。

しかし、そのままでは肝心のcommon.cssが参照されないので、今度はhome.cssにcommon.cssをインポートしてやります。インポートというのは、home.cssの中で、home.cssを読み込む前にcommon.cssを読み込んでおく為の記述をしておく事です。@importルールというもの適用します。common.cssとhome.cssが同一階層内にあるなら、home.cssの先頭に以下の記述（何れか一つ、どちらでも）をします。

@import "common.css";
@import url(common.css);

これにより、ホーム（トップページ）のHTMLファイルに適用されるスタイルはcommon.cssを参照してからhome.cssが参照される、という事になりますのでHTMLファイル内に直接、

<link href="css/common.css" type="text/css" rel="stylesheet" media="all">
<link href="css/home.css" type="text/css" rel="stylesheet" media="all">

の順番で参照した時と同じ順番（継承）でスタイルが適用されます。

なお、必要に応じて、インポートするCSSファイルは複数指定もできますし、インポートしたCSSファイルが更に別のCSSファイルをインポートしている、という状態にもできます。まあでもそれは、サイトのコンテンツの量が巨大になりスタイルも多様性に富んで来た場合などは、そういう対応も必要になってくる場合もある…ぐらいに思っておいて下さい。

@importルールの詳細については、以下のサイトなどを参考にしてみて下さい。

http://w3g.jp/css/guide/at_rule
http://www.tagindex.com/stylesheet/basic/format7.html

お礼

大変丁寧で分かりやすい記述をありがとうございます。
色々な整理方法があると思いますが、
こちらで一度試してみようと思います。
@importにつきましても勉強してみようと思います。