効率的でクリーンなCSSコードの原則(上)

CSSを学ぶのは難しくありませんが、大規模なプロジェクトでは管理が難しくなり、特に異なる人がCSSの書くスタイルに少し違いがあり、チームではコミュニケーションがさらに難しくなります.そのため、効率的で清潔なCSSコードの原則をまとめました.
1.Resetを使用するがグローバルResetではない
異なるブラウザ要素のデフォルト属性は異なり、Resetを使用してブラウザ要素のデフォルト属性をリセットし、ブラウザの互換性を達成します.ただし、グローバルResetは使用しないでください.

*{ margin:0; padding:0; }

これは、緩やかで非効率な方法であるだけでなく、不要な要素も外側と内側の余白をリセットします.ここではYUI ResetとEric Meyerの作り方を参考にすることをお勧めします.

/**        **/
body, h1, h2, h3, h4, h5, h6, hr, p,
blockquote, /* structural elements      */
dl, dt, dd, ul, ol, li, /* list elements      */
pre, /* text formatting elements        */
form, fieldset, legend, button, input, textarea, /* form elements      */
th, td, /* table elements      */
img/* img elements      */{
border:medium none;
margin: 0;
padding: 0;
}
/**        **/
body,button, input, select, textarea {
font: 12px/1.5 '  ',tahoma, Srial, helvetica, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
em{font-style:normal;}
/**        **/
ul, ol { list-style: none; }
/**         **/
a { text-decoration: none; color:#333;}
a:hover { text-decoration: underline; color:#F40; }
/**        **/
img{ border:0px;}
/**        **/
table { border-collapse: collapse; border-spacing: 0; }

2.良い命名習慣
めちゃくちゃなコードや意味のない名前のコードは、誰が見ても狂ってしまうに違いない.このようなコード:

.aaabb{margin:2px;color:red;}

初心者でも、実際のプロジェクトでclassという名前を付けることはないと思いますが、このようなコードが同じように問題があるとは思いませんか.

<h1>My name is <span class="red blod">Wiky</span></h1>

問題は、元の赤いフォントをすべて青に変更する必要がある場合、変更するとスタイルが次のようになります.

.red{color:bule;}

このような命名は理解しにくいが、同じ命名は.leftBarのサイドバーを右側のサイドバーに変更する必要がある場合も面倒です.したがって、要素の特性(色、位置、サイズなど)を使用してclassまたはidを命名しないでください.sidebar{...},.postwrap{...}
これにより、これらのclassまたはidを定義するスタイルをどのように変更しても、HTML要素とのつながりには影響しません.
また、いくつかの固定的なスタイルは、定義後に変更されません.名前を付けるときは、さっき言ったような状況を心配する必要はありません.

.alignleft{float:left;margin-right:20px;}
.alignright{float:right;text-align:right;margin-left:20px;}
.clear{clear:both;text-indent:-9999px;}

では、このような段落について

<p class="alignleft">      ！</p>

この段落を元の左揃えから右揃えに変更する必要がある場合は、classNameを変更するだけでalignrightになります.
3.コード略語
CSSコードの略語はあなたのコードを書くスピードを高めることができて、あなたのコードの量を簡素化します.CSSには、margin、padding、border、font、background、色値など、略語可能な属性がたくさんあります.コード略語をマスターしたら、元のコード:

li{
font-family:Arial, Helvetica, sans-serif;
font-size: 1.2em;
line-height: 1.4em;
padding-top:5px;
padding-bottom:10px;
padding-left:5px;
}

以下のように略すことができます.

li{
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
padding:5px 0 10px 5px;
}

 4. CSSによる継承
ページ内の親要素の複数のサブ要素が同じスタイルを使用している場合は、同じスタイルを親要素に定義して、これらのCSSスタイルを継承することをお勧めします.これにより、コードをよく維持することができ、コード量を減らすことができます.本来このようなコードは

#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif; }
#container h1{font-family:Georgia, serif; }

次のように簡単に書くことができます.

#container{ font-family:Georgia, serif; }

5.マルチセレクタの使用
複数のCSSセレクタを1つにまとめることができます.共通のスタイルがあれば.これにより、コードが簡潔になるだけでなく、時間とスペースを節約できます.次のようになります.

h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

次のようにマージできます.

h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }