TOP  >  CSS・スタイルシートTIPS  >  記述する順番を考慮したCSSの書き方

2011年01月05日 13:54

記述する順番を考慮したCSSの書き方

CSSのプロパティを書いていく際、
なんとなく思いついた順番、ルールで記述していってもちゃんと表示すれば良いのですが、
書く順番をきちんとルール付けしておくことで、
見た目にきれいなCSSになり、
複数人で編集する際も間違いを防ぐことができます。



mozilla.org Base Styles に記載の順番に沿ってCSSを書く

書く順番にもいろいろありますが、 mozilla.org Base Stylesは参考にする書き順として有名です。 セレクタに対してボックスモデルなど大きなところから、 フォントなど小さなところへ降りていく書き方なので、 覚えやすく、かつ他の要素に影響があるプロパティがまとまるので、 修正などの際もわかりやすい書き方になっています。
/* mozilla.org Base Styles
* maintained by fantasai
* (classes defined in the Markup Guide - http://mozilla.org/contribute/writing/markup )
*/
/* Suggested order:
* display
* list-style
* position
* float
* clear
* width
* height
* margin
* padding
* border
* background
* color
* font
* text-decoration
* text-align
* vertical-align
* white-space
* other text
* content
*
*/

W3CのCSS2 Specificationに沿った書き方

mozilla.org Base Styles以外には、 W3CのCSS2 Specificationに沿った書き方も知られています。

CSS2 Specificationでのプロパティの出現順序

上記のように「プロパティの記述順はCSS2 Specificationで出てくる順序です」という説明ができるので、こちらも便利です。

すぐに使えるスタイルシート標準テクニック
iPhoneアプリケーション開発ガイド
HTML5&CSS3辞典

TOP  >  CSS・スタイルシートTIPS  >  記述する順番を考慮したCSSの書き方




正当なCSSです!