CSS の管理ってどうしたらいい?(主に設計に関して)

このブログも当然のように CSS で完全レイアウトされてるわけですが、やはり問題は外部 CSS ファイルの管理方法。管理もそうだけど、そもそもの設計方法が重要ってお話。

早水悠登氏のエントリを見て、「あー、気持ちは分かるなぁ。これって設計上の問題でも発生するんだよなぁ」とうにょうにょ思ってたんですが、じゃあ実際にどーすりゃいいのよ、ってなるとこれがまた難しい。

とりあえずこの double-team.org の CSS を例に出してみます。
まずは外部 CSS ファイルの構成から。

  • import.css(以下の CSS ファイルを読み込むための CSS ファイル)
    • elements.css(各要素を再定義&リセット用 CSS ファイル)
    • layout.css(大枠のレイアウトを定義した CSS ファイル)
    • header.css(ヘッダ部分の CSS ファイル)
    • footer.css(フッタ部分の CSS ファイル)
    • navigation.css(ナビゲーション部分の CSS ファイル)
    • contents.css(MT とは関連のないコンテンツ用の CSS ファイル)
    • entry.css(エントリ内に対する CSS ファイル)
    • entry_menu.css(エントリの日付、タイトル、タグ等の装飾用 CSS ファイル)
    • search.css( input 型とタグ型検索用 CSS ファイル)
    • sidebar.css(右側にあるボックス用 CSS ファイル)

他にも Windows 版 IE6 用の CSS ファイルがあったりしますが、そこは割愛。とりあえずこんな感じです。
こう見ると分かると思いますが、モジュールのような考え方でヘッダはこれ、エントリはこれと言った感じで、全てファイルを分けています。この考え方は昔からありましたが、最近のライフハック的な流れから定着してきました。7月にあったWeb標準の日長谷川 恭久さんロクナナの中村 享介さんと河内 正紀さんが各セッションでこれについてお話をされてました。(各セッションの内容は 「Web標準の日」のサイトにて公開されています。

関係ないですが、CSS の記述順はかなり適当です。 hail2u.net さんや 2xup.org さんのように、何かしらの規則性がある書き方は今のところなってないです。なんとなく外枠( display プロパティやボックスモデル関連)を先に記述するようには努めていますが、フォントやテキストまで下がると結構曖昧だったりします。

話を戻します。こうやってレイアウトの構造によって CSS ファイルを分けているわけですが、完全にスマートで綺麗と思われる内容には仕上がりません。(自分の場合はですが ← 言い訳)
それはなぜか。これだけ CSS ファイルを分散化しても、各 CSS ファイルにおいて共通項が存在してしまうことです。

よく分からないですね。もっと具体例を出します。
例えば各エントリのタイトル部分(本エントリでは「CSS の管理ってどうしたらいい?(主に設計に関して)」がこれに該当)は XHTML 上では h2 要素でマークアップされています。これのスタイルが記述されている CSS ファイルは entry_menu.css です。
今度は About ページの部分を見てみます。ここのタイトルは h3 要素でマークアップされています。ですが、文字サイズや色は同じです。ですがこのページはエントリされたものではありません。ただの静的 HTML 文書です。なので、この部分のスタイルは contents.css ファイルに記述されます。

しかしこれだと同一内容のスタイルが entry_menu.css と contents.css に記述されることになります。これでは意味がありません。例えばこのブログをリデザインをしようとした時、 h2 要素のスタイルを変更したとしても h3 要素のスタイルが変わらなくなってしまいます。これは非常にありえることです。サイトを設計した私でさえ見落とす可能性があるでしょう。

もちろんこうした共通部分はセレクタの複数指定で回避できます。しかしどちらか一方の CSS ファイルに記述しなければならないのですが、それがどちらに書くかが問題です。
これを解消するために別の CSS ファイル(例えば heading.css )を作成してそこに記述するのもアリですが、そうすると今度はそれに応じて他の部分も分割・統合しなければならなくなり、 CSS ファイルが肥大化していきます。もちろん細分化していけば保守管理が楽になると言う人もいるでしょうが、一般的に言えば 10 も 20 も CSS ファイルが作られていくと保守管理に支障をきたすはずです。

組織的に運営していく過程では、これはもう何かしらのガイドラインを設けれなければならないです。個人であれば自分の主義主張を通すので良いかと思いますが、やはり製作者として何かしら一般共通認識がなければならないと思います。
どうしたら正しいのかは今のところ私にも分かりません。ですが、ある一定の基準を設けなければただのカオスでしかないので、自身で独り善がりにならない程度のポリシーを持つべきなのかと思います(抽象的ですが)。

トラックバック(0)

このブログ記事を参照しているブログ一覧: CSS の管理ってどうしたらいい?(主に設計に関して)

このブログ記事に対するトラックバックURL: http://www.double-team.org/mt/mt-tb.cgi/17

コメントする

このブログ記事について

このページは、yu-sukeが2006年10月16日 23:40に書いたブログ記事です。

ひとつ前のブログ記事は「帰ってきました」です。

次のブログ記事は「フル CSS レイアウトできるといって自慢扱いされたかわいそうな Web クリエイタ」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。