Modular CSS

CSS

いわゆるテーブルレイアウトが嫌いで、CSSが好きな人であるのだが、プロの開発者でもデザイナでも無いし、大規模なCSSを書いたことは無い。それでも、サイトのデザイン変更をしようと思ったら、歴史を重ねたCSSファイルは結構つぎはぎで、面倒なことになっていることが有る。プロの方は大変だろう。

と思っていたところに「Modular CSS」と言う記事を読んだ（英語）。
http://contentwithstyle.co.uk/Articles/12
要約すると、

  • CSSファイルを用途ごとに別け、
    • フォント関連 (Typography)
    • フォーム (Forms)
    • ナビゲーション (Navigation)
    • レイアウト (Layout)
    • 色 (Colour scheme)
  • メインのCSSファイルで @import する
/* typography styles */
@import url("typo.css");

/* form elements */
@import url("forms.css");

/* main layout */
@import url("layout.css");

/* navigation */
@import url("horizontal-nav.css");

/* colour scheme */
@import url("skin.css");

見通しが良くなって良いですね。
日本でこういうのが常識なのかどうなのか知らないけれど、小規模サイトでも十分使ええる方法だと思う。