CSSは、主なHTMLエディタなどでは標準で編集できますが、多人数での開発
やスタイルが多くなってくるほど管理が大変になっていきます。
アプリケーションソフトの管理機能もいいですが、CSSコーディング規約のようなものがあると、より把握が容易になるメリットがあります。
サイト基準設定、ページレイアウト、共通要素、個別スタイルに分ける
構成内容によって、上記のような段階に分けると、意図しない表示等が出たとき、簡単に影響箇所の割り出せます。
- 基準スタイル（ex: base.css)
- font-sizeやfamily,デフォルトのmarginやpaddingのリセット等。
前回のYUIのReset.CSSを使う手もあります。 - ページレイアウト(ex: layout.css)
- カラム構成やグローバルナビボタン、大まかな画面レイアウト等。
ブログなどでよくある3カラム形式、リキッドレイアウトなど、大まかなレイアウト構成を決めます。 - 共通要素(class.css)
- floatのclearや共通コンテンツのマージン幅など使いまわすもの。
class="hoge foo bar"などのように複数指定できるメリットを生かし、
個々のスタイルは簡素なものにする - 個別スタイル(ex: xxx.css(ページ名など))
- 共通以外に、特に個々のスタイルを指定するとき
レイアウトブロックごとに記述する
サイトブロック構成は html, body, container, header, wrapperなど、ブロック毎に独立させている場合が多いと思います。使いまわせるものは使いまわし、出来るだけ階層に沿った形で記述します。
/** header **/
#header{
...
}
/** wrapper **/
#wrapper{
...
}インデントを使う
タグのDOM構成と同じように、ブロック内部のスタイル指定をする場合に役に立ちます。
親ノード<ul>の子要素<li>等の場合、以下のようなイメージです。
/** header **/
#header{
width:760px;
}
#header ul {
margin: 10px, 0
}
#header ul li{
line-height: 0.9em;
}圧縮する
最後に、不要なコメントやインデントを削除して転送量を軽くします。
これは転送量が大きくなった今では、あまりやらないかもしれませんが、スタイルの最適化もしてくれます。
- CleanCSS
- http://www.cleancss.com/
特に16進数指定のcolorなど、直感的に読み解くのは結構面倒なものなので、私はいつもrgb()で指定しています。
body{
color:rgb(100%, 50%, 0);
color:rgb(255, 128, 0);
font-weight:bold;
}これらの最適化を行った結果、
body{color:#ff8000;font-weight:700}こういった16進数への変換や、font-weightの変換も行ってくれます。
しかしながら不可逆な変換なので、必ずバックアップしておきましょう。
リンクに引数をつけて強制キャッシュクリア
例) css/base.css?ver=200704062130
headのmetaでcssを指定するとき、ブラウザキャッシュが残っていてうまく表示されないことがあります。
ユーザーに「更新を強制」するのも難しいので、こちら側で指定してあげるテクです。
キャッシュをクリアしたいCSSのURLの最後に、"?ver=200704062124"など、
更新日をつけておくとURLが変更されたとみなされ、ブラウザが新たにCSS要求します。
CSSに引数をつけても意味がないので無視され、新しくCSSがキャッシュされるという仕組みです。