エントリー記事

importするCSSファイルが増えすぎて困った


importするCSSって、以前はこんな感じだったんですが

  1. reset.css(主にYUI)
  2. hack.css
  3. fontsize-fix.css(フォントをpx指定してIE用に%指定hack)
  4. base.css(主にYUI)
  5. layout.css(カラムなどのレイアウト用)
  6. header.css
  7. sidebar.css
  8. footer.css
  9. main.css

これにjQueryなどのライブラリを実装すると、さらにcssをimportしなきゃならなかったりするので、結構な数になります。

DW4は、いま開いているhtmlファイルが読み込んでいるCSSやJSのファイルも表示してくれますが、ずらずら〜っと表示されて、なかなか大変な数になりますね...把握できなくなることもしばしばです。

なので、せめてCSSのimportをもうちょっとシンプルにしようかと思いましてん。最近は、こんな感じになってきています。

mdさんのimport.css

  1. reset.css(+base.css、fontsize-fix.cssを含む)
  2. layout.css(カラムなどの全体のレイアウト)
  3. module.css(ヘッダ、グローバルナビ、サイドバー、フッター)
  4. main.css

んまぁつまりは、まとめちゃったわけですが(^^;)。各CSSファイルは長くなってしまいますが、Webオーサリングソフトも賢くなっているので、追っかけるのはそんなに苦じゃないと思います。

hack.cssって、中身はie6.cssみたいなものなので(^^;)、いっそIEの条件分岐でIE6のときだけie6.cssを読み込むとか、んまぁHTMLに余計な記述は増えるのですが、そうした方があとから見たときの修正がスムーズな感じもしてきました(mdだけ?)

print.cssってあんまり好きではないです。だって、印刷する人が選べない。「見たまま」を印刷したいニーズもあるんじゃないかと。競合サイト調査とかで、サイトを印刷して資料を作ることってあるじゃないすかw

なので、印刷対応なら「印刷用ページはこちら」のほうが好きかなぁ。それ用のデータを準備するのが面倒なのですが、CMSならこの手の処理はできるかも。MTなら、アーカイブマッピングで印刷用のテンプレート+CSSを組めばよろしいんではないかと。

ちうわけで

新規ローンチサイトから、こんな仕様に変わってきています。別にこうしろというものではありませんので、おのおのの環境下でよしなにどうぞ。