http://www.admixweb.com/2010/11/09/tips-to-code-better-css-for-in-your-projects/
わかりやすい名前をつける
idではなく、classを使う
#formExample1{
border:1px solid gray;
padding:20px;
}
#formExample2{
border:1px solid gray;
padding:20px;
}
これは別要素に同じようなスタイルを適用している。無駄が多く、再利用性にかける。
共通するスタイルはクラスで再利用できるようにする。
.form{
border:1px solid gray;
padding:20px;
}
再利用性にかけるもうひとつの原因は、単純なスタイルを特定のセレクターに適用する場合。
div.error-message{
color:red;
}
この場合は単に.error-messageとする。
これで全てのセレクターにクラスを適用できるようになる。
継承とカスケードプロパティーを使う
.odd{
background-color:#E9EBEB;
}
.even{
background-color:#9EB0EE;
}
不要なスタイルを作成している。
| Lorem | Ipsu |
| Lorem | Ipsu |
| Lorem | Ipsu |
| Lorem | Ipsu |
この場合、親の継承を使用する。
table tbody{
background-color:#E9EBEB;
}
.even{
background-color:#9EB0EE;
}
親要素の背景色を設定し、縞の部分のみクラスを使う。
| Lorem | Ipsu |
| Lorem | Ipsu |
| Lorem | Ipsu |
| Lorem | Ipsu |
名前空間
.widget{
width:300px;
height:200px;
border:1px solid gray;
}
.widget > h3{
color:white;
background:black;
padding:10px;
}
名前空間を使うことでクラス内の要素のみに適用できる。
Better Markup to Avoid Classitis and Divitis
インラインスタイルを使わない
CSSハックを避ける
CSSをリセットする
コメントを入れる
/* Reset */
..Restet the browser default..
/* Layout */
..Code for Layout only, including Forms..
/* Pages */
..Code that is used for specific page or pages.
/* Miscellaneous */
..Code for messages div, alerts, lightbox, etc.
shorthandsを使う
自分にとって最適なスタイルを選択する
コードの繰り返しを探す
プロジェクトが完成した後に、反復的なコードやパターンを探し、クラスに変換する。たとえば、プロジェクトのさまざまな部分に同じ背景と色を使用して、クラスにこれらのプロパティを追加し、それらを再利用すると良いでしょう。これは反復的なコードを避け、簡単に維持することができる。
Spriteを使う
http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-sprites-obsolete/
オブジェクト指向CSS
http://www.slideshare.net/stubbornella/object-oriented-css
名人から学ぶ
Chris Coyier, Eric Meyer, Stu Nicholls, Nicole Sullivan, Andy Budd, Alen Grakalic, and a bunch of sites to help you to learn CSS.
0 件のコメント:
コメントを投稿