CSS3対応、スタイルシートの記述で気をつけるべき19のポイント
Post on:2011年8月22日
sponsors
スタイルシートの記述で気をつけたい19のポイントを紹介します。
[ad#ad-2]
以下は、スタイルシートをオンラインでチェックできるツール「CSS Lint」で使用しているルールを意訳したものです。
スタイルシートの記述で気をつけたい19のポイント
スタイルシートの記述ミスはしない
これは一番大切なことです。
1文字でもタイプミスをしないようにしましょう。
隣接クラスは避ける
「.foo.bar」のような隣接クラスはIE6などでサポートしてないので、使用には注意してください。
空のルールを残しておかない
空のルールとはプロパティを指定していないものです。
.foo {}
これは単にファイルの容量を肥大化させるだけなので、削除します。
display使用時のプロパティに注意
スタイルシートではプロパティのグループを一緒に定義することができますが、displayを使用する際には下記のものがそれぞれ無視されます。
- display:inline
- width, height, margin, padding, float
- display:inline-block
- float
- display:block
- vertical-align
- display:table-*
- margin, float
これらは無視あるいは問題となるので、削除します。
floatをたくさん使いすぎない
レイアウトのためにfloatをたくさん使うのは、素晴らしいアイデアではありません。目安としては、10回くらいで。
Webフォントをたくさん使いすぎない
Webフォントはフォントファイルのサイズが非常に大きいため、数を多く使いすぎるとパフォーマンスが低下します。目安としては、5種類くらいで。
font-sizeをたくさん使いすぎない
font-sizeを10以上指定するのであれば、フォントサイズ用のclassをまとめたセットを作成した方がよいです。
セレクタでidは使わない
セレクタでの指定にはidではなくclassを使用するようにします。
idは再利用しにくいです。
見出しの定義に条件をつけない
h1～h6の見出し要素は、ページの特定のエリアにスコープされるべきではありません。
.foo h1 {
font-size: 110%;
}
これは「.foo」配下のh1のみという指定です。
見出し要素はサイト内で一貫したものにします。
見出しの定義は一回だけ
h1～h6の見出し要素は、サイト内でルールを一つだけにするべきです。
0の単位は省略する
スタイルシートのファイル容量を軽減する簡単な方法の一つが、値が「0」の時は単位を省略することです。
例えば「0px」の時は、「0」とします。
ベンダープレフィックスを使う時の注意
「-moz-」のようなベンダープレフィックスを使う際は、必ず標準的なプロパティも一緒に記述するようにします。
.foo {
-moz-border-radius: 5px;
border-radius: 5px;
}
順番は、ベンダープレフィックスの後に標準的なプロパティを記述します。
CSSグラデーションは全部プレフィックスが必要
CSSグラデーションの指定は標準的なものがなく、全てのブラウザ用のベンダープレフィックスで記述します。
複雑なセレクタは避ける
CSS3では「~=」のようなセレクタも用意されています。あまり複雑なセレクタはパフォーマンスを低下されるため避けるようにします。
ボックスモデルのプロパティに気をつける
borderとpaddingと一緒にwidthかheightを設定することは期待した通りの表示をしないため、たいていの場合ミスです。
borderとpaddingを一緒またはどちらかをwidthかheightと一緒に設定しないようにします。
@importを使わない
@importはいくつかのブラウザで並列ダウンロードを阻止するので、使用しません。
- 参考：
- don't use @import
- 外部スタイルシートの指定は@importとlinkでどちらがいいか（上記日本語訳）
!importantを使わない
「!important」はスタイルシートの指定を上書きしてしまいます。
多くても10個以上は使うべきではありません。
ベンダープレフィックスは全部書く
CSS3のプロパティの多くは各ブラウザ用のベンダープレフィックスを持っています。
- Firefox
- -moz-
- Chrome/Safari
- -webkit-
- Opera
- -o-
- Internet Explorer
- -ms-
これらすべてを含めて指定することで、より多くのユーザーに一貫したアピアランスを与えることができます。
プロパティの重複は避ける
同じプロパティを二度記述している場合、それは意図的（上書き）あるいは意図的ではないかもしれません（コピーミス）。
重複したプロパティが異なる値であれば、特に問題はないでしょう。
.foo {
background: #fff;
background: rgba(255, 255, 255, 0.5);
}
しかし、プロパティが同じ値だったり、規則の異なる場所にある場合は意図的ではない可能性があるので注意してください。
.foo {
background: #fff;
color: #000;
background: rgba(255, 255, 255, 0.5);
}
CSS Lint
CSS Lintは上記で紹介したものをはじめ、スタイルシートのチェックが簡単に行えます。
[ad#ad-2]
sponsors
