なぜ分割するのか

1. 余分なものを読み込まなくてすむように。

構造（structure）と見栄え（prasentation）をHTMLとCSSに完全に分離すると，CSSのほうにたくさんの記述をすることになります。その中には，ある特定のページにしか適用されないものも出てきます。

これらのすべてを1枚のCSSファイルに書き，すべてのページで読み込む方法だと，そのページには適用されないものまで相当数読み込むことになってしまいます。

CSSファイルをいくつかに分割しておき，必要なものだけを読み込むようにすると，この無駄を省くことができます。

2. CSSが管理しやすくなるように。

ルールセットが多くなってくると，何がどこに書かれているのか探すのが大変になります。また，カスケード処理や値の継承の具合で，どの指定が適用されているのかも分かりづらくなってきます。

CSSファイルを適度な分量に分割して，それぞれのファイルの役割をはっきりさせ，記述や読み込みの順序に法則性を持たせておくと，管理が楽になります。

具体的な分割の方法

ぼくはまず，どのページに適用されるかによって，ファイルを分割しています。

• サイト内のすべてのページに適用されるもの
• 特定のページ群（またはページ）に適用されるもの

ここからさらに，

• ブラウザ間の差異を解消する初期化に関わる部分
• CSSを切り替えて変化させる部分

などを抜き出して別のファイルを作ります。

数十ページのサイトだと，だいたい次のようなCSSファイルができます。

• default.css （初期化）
• common.css （全ページに適用するもの）
• top.css （トップページに適用するもの）
• lower.css （トップページを除く下層ページに適用するもの）
• category1.css （category1の各ページに適用するもの）
• category2.css （category2の各ページに適用するもの）
• ...
• print.css （印刷用）

ページのレイアウトで見ると...。common.css にはヘッダー，フッター，ナビゲーションあたりに適用されるものが書かれます。top.css，lower.css には，メインのコンテンツ部分に適用されるもの，categoryN.css にはそのカテゴリ固有のものが書かれます。

インポートの方法

上の図にかかれた下のファイルから順に読み込みます。CSSでは，同じ要素に対していくつかの指定がかち合ったとき，セレクタの詳細度が同じなら，後のほうに書かれたものが優先的に適用されます。より一般的な「原則的にこうだよ」というものを先に，「でも，ここはちょっと違うよ」という特殊なものは後から読み込むようにしておくと，分かりやすくなります。

print.css を別にすると，トップページでは次のファイルが必要になります。

• default.css （初期化）
• common.css （全ページに適用するもの）
• top.css （トップページに適用するもの）

category2 の各ページでは，

• default.css （初期化）
• common.css （全ページに適用するもの）
• lower.css （トップページを除く下層ページに適用するもの）
• category2.css （category2の各ページに適用するもの）

以前は import_top.css，import_category2.css などのファイルを作り，

@import url(default.css);
@import url(common.css);
@import url(top.css)

というふうに，各ファイルをインポートして，これを index.html にリンクさせていました。が，サイトの規模が大きくなってくると import_(category name).css といったファイルが無闇に増えてしまいます。

今は，top.css の最初のほうで default.css と common.css をインポートし，その後に続けてトップページ適用させるルールセットを書き，index.html にリンクさせる...という方法をとっています。

category2 の各ページは，category2.sss にリンクし，このCSSファイルでは次のように各ファイルをインポートしてから，category2 に適用するルールセットを書く...というふうにしています。

@import url(default.css);
@import url(common.css);
@import url(lower.css)


div#main div.section h3 {
  ...
}

...

HTMLファイルにCSSを書かないために

「このページのこの部分だけ，ちょっとイレギュラーに違うデザインにしたい」ということがときどきあります。

HTMLファイルに，style要素や style属性を使って，その部分にだけ適用させるCSSを書くという方法もあるのですが，これだと構造（structure）と見栄え（prasentation）の完全分離は実現できなくなってしまいます。

ぼくは Re: CSSによるデザインワークと相性のよいHTMLって？ で紹介したように，body要素の id属性でページ名を付けるようにして，category2.css の下のほうに，次のような記述を追加しています。

/* Links Page Only */

body#links div#main div.section ul.link-list {
  background: url( ... ) no-repeat left center;
  padding-left: 10px;
}

こうような特定のページにだけ適用させるルールセットが多くなるような場合は，(page name).css といファイルを新たに作り，これらのルールセットを書いて該当ページにリンクさせるようにしています。

分割しすぎるとかえって面倒

分割の方法があまりに複雑だったり，分割したファイルがたくさんになりすぎると，かえって管理が面倒になります。あえて分割しなくても，同一ファイル内をコメントで区切り，何がどこに書かれているかをはっきりさせておけば，かなり分かりやすくなります。

また，各CSSのファイルの役割，インポート先・リンク先，必要に応じてHTMLのDOM構造の主要な部分などを書いておくと管理の手助けになります。良い例となるか分かりませんが，ぼくが書くCSSの最初のほうは，次のような感じです。

@charset "UTF-8";

/*---------------------------------------------

Common CSS
for all pages
coded by d-spica at 2008-05-23
imported to "$category-name.css", "top.css"

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

Basic Layout

  body

    div#header
      p.description
      p.logo / h1.logo
      p.tel
      ul.nav

    div#contents
    
      p#topicpath / -

      div#main
          ... ( >lower.css / >top.css )

      div#sub
        ul.nav
        ul.banner

      p#toTopNav
      
    div#footer
      ul.nav
      p.credit

---------------------------------------------*/

参考

• CSS 分割管理の実践編 - 2xup.org
• 分割CSSファイルの構成とそのルール - 3ping.org
• Re: CSS分割管理の実践編 - Go my way
• コーディングする際のCSSの分割方法について【With-D】

追記

さらに参考となるページを。

• Clear Sky Source - マルチシートアプローチとかクラス名とか
• re:マルチシートアプローチとかクラス名とか[to-R]

関連

CSSの初期化ファイル default.css について。

• CSSの初期化ファイル