自分デファクトなCSS定義、mydesign.cssを考えてみる(1)

前置き

企業内の業務システムのWebアプリを開発する際、見た目のきれいさというのはどうしても優先順位が低くなってしまいます。（うちの場合だけかもしませんが）社内システムの画面のルックスは、それはかっちょ悪いものが多いです。
「コシューマー向けのアプリじゃないんだから、見た目なんか気にしなくてもいいじゃん」っていうＩＴ部門の体質も関係してるかもしれません。（エンドユーザ、特に要求仕様を書いた人は結構気にしますけどね。）
今でこそお得意様の会社で、ゆったりと社内SEをやらせてもらってますが、つい３年程前まで外注業者としてシステムを収める立場でいた時は、スケジュールに追われながらの業務ロジックの実装やテストに必死で、見た目（配色やコンテンツの配置関係など）にまで気を使って時間をとるのは確かに厳しい状態でした。
ただ、自分が作り上げたシステム＝作品ですし、納品先のお得意様の敷地内に私の会社の職場があることから、長いことそれらのシステムを保守していくシステム担当者としての顔が、対エンドユーザにあるので、見た目がかっこいいにこしたことはありません。
見た目は、ユーザビリティにも強く関係しますし、システムの要求元部門（つまりシステムを使う人）の評価にも強く関係してきます。エンドユーザの評価は目に見える部分が結構重要になりますので。
そんな訳で自分個人としては、極力見た目にも神経を使ってシステムを作ってきたつもりですが、お得様の会社の社内SEになって仕事にゆとりができ、新技術の勉強や「はてな」などで、Web標準やらマークアップエンジニアとかいう世間様では一般的に使われる言葉を知るようになってくると、「今までのやり方って全然だめじゃん」って思うようになりました。
社内システムのhtmlを見ると、Web標準云々の前にタグの使いかたも結構適当だし、DOCTYPE宣言など見た事もありません。なによりもあまりにもＩＥ様専用なプログラムなので、IEのバージョンアップで動かなくなるのではないかと今から心配です。
そんな中、昨年の内作案件でのTeedaの採用、はてブしまくったAjax系ライブラリの乱用(？)で、標準準拠の大切さを身をもって知りました。今はCSSの先生方のブログなどを参考にさせてもらいながら、自分デファクトなCSS定義セットを少しづつ作っている段階です。
これを少しづつブラッシュアップしてくことで、clearfixやIEバグなどで毎回同じようなことに悩まずに、「スッキリ・スマートな画面」を、サクっと作れるような状態にもっていけたらと思い、以下のような構成のmydesign.cssを作成してる最中です。

mydesign.cssの構成

mydesign.css

YUIのreset.css、独自初期化定義のmyreset.css、デフォルトスキンのmyskin_default.cssのimportのみを行います。myreset.cssでは、reset.cssによりクリアされたmargin,padding,font-size等を再設定します。myskin_default.cssは、background-colorやborder等を設定し、最低限必要な範囲でシンプルに見栄えを整えます。

myparts.css

汎用的に使われる独自のクラス定義を管理します。必要に応じてimportします。clearfixの定義は記述が複数箇所にちらばらないよう一箇所(myclearfix.css)で行い、これをimportします。

myskin_***.css

デザインに幅を持たせたい場合に追加定義し、必要に応じてimportします。