WEB DESIGN (B)LOG

ノンプログラマーなWebデザイナーによるWordpress、HTML5、スマートフォンサイト制作関連などWebサイト制作に関するブログ

私のCSSの書き順

:HTML•CSS

コーディングの際に自分の中でルールなくCSSを記述していくと、
いつのまにかぐちゃぐちゃ、
気を抜くとすぐにわかる人に見せたくないような書き方になってしまいます。

そもそもCSSの書き順には公式なルールというかW3Cによる、
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
というものがあるのですが、
これではなかなかわかりにくいので、
よく使われている、
mozilla.org Base Styles
をベースにCSSを書くようにしています。

/* 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
*
*/

これならある程度絞られているので、
すぐに覚えてルール付けすることができます。

ただCSS3や、
IEの独自プロパティなど入れる場所の判断に困ることもしばしば。
CSS3についてはそのうちいい感じのルールがないか調べてみたいと思います。

pagetop