コーディングする際のCSSの分割方法について【With-D】

CSSの分割するメリットは色々あるとは思うのですが、逆に分割しすぎてデメリットになることもあるかとは思うので色々難しいなと日々思っているところですが、やっぱり分割すると管理しやすかったり、目的の箇所を探すのに楽だなって事で、下記のような分割をしています。

実際の【With-D】で行っているCSSの分割方法

CSSの最初にコメントで説明を入れているのですが、現在のところ古いままになってます...申し訳ないです。
それ以外のcssの中身で見て頂けたらと思います。

• http://with-d.net/css/set.css
• http://with-d.net/css/common/default.css
• http://with-d.net/common/layout.css
• http://with-d.net/css/common/header.css
• http://with-d.net/css/common/sidebar.css
• http://with-d.net/css/common/footer.css
• http://with-d.net/css/common/enhance.css
• http://with-d.net/css/content.css

だいたいこんな感じに管理してます。自分で管理しやすいのを重点に置いてますので、結構細かく分割しています。基本的には部位ごとで分割している感じですね。これはメディアサイト運営に多く携わってきて、ヘッダー内の更新やサイドナビゲーションの更新など定期的にその部位を更新する事も多く、その箇所のCSSを探すのが面倒だったのでこういう分割にしています。

分割されているCSSの主な役割について

set.css

全部インポートする用のCSSになります。昔はimport.cssなんて名前にしてましたが、他の方のを見たりするとsetting.cssやset.cssなどが多く、自分もset.cssにしました。

common/default.css

ブラウザリセット用のcssと全項目共通設定用（aタグやfontなど）のCSSです

common/layout.css

サイト構造の設定CSSです。枠組みのみ（wrapper,container)をここに記載して、それ以外はその枠のCSSで制御してます。これを記載している意味の大半はcssの枠組みを自分の中で確認する意味も込めての作成です。でも実際にはあんま作ってる意味がないんじゃない？と思います。default.cssに入れちゃおうかとも悩んでます。

common/header.css

その名の通り、ヘッダー部制御のCSSです。基本、ヘッダー、グローバルメニュー類、パンくずナビの制御までここに記載してます。

content.css

基本、メインコンテンツ制御のCSSを書いてます。ここが色々バラバラになるって感じですね。はい。

common/sidebar.css

その名の通り、横のナビゲーション制御のCSSです。トップから下層まで例外でもない限り全ページにサイドバーは表示するので、管理しやすいようにサイドバーの制御のみのcssを作りました。

common/footer.css

その名の通り、フッター制御のCSSです

common/enhance.css

これを実際使わないほうがいいのかな？とも思うのですが（使わないクラス等をひたすら設定しているので無駄が多いかな？と）拡張用です。なるべく使わないように気をつけてますが急いでる時などや仕事で応急処置的な場合に微調整用などで使うことがあります

実際問題、こうやって分けて管理しているのですが、そもそも仕事で、ヘッダーやサイドバーとフッターなどをSSIで読み込ませて外部ファイル化して管理していたので、それと同じようにCSSも分けたほうが管理しやすいんじゃない？というのがこの分け方の発端です。

仕事だと自分以外も編集したりするわけですし、皆がわかりやすいように...となるとこうなってましたが、実際問題どうなのかはわかりません。自分的には結構いいかなぁなんて思ってるのですが...

ちょっと下層ページやタイアップページなどでメインコンテンツ部を違う形式で追加する際には、content.cssをその階層で少し変更すれば他のはいじらなくてもいいし。という感じですね。

ブログと違って、メディア等の場合、結構メインコンテンツのところは広告だったり、自社編集だったりとかでレイアウトも何もかも別々に作ったりするので、枠組みでCSS分けたほうが便利かなと。

そんなこんなでこういう振り分けにしています。
こうした方がいいよ？とかそれおかしくない？とか何か意見頂ければ助かります。