btmup Blog

Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。

CSS

CSS のプロパティの書き順をちゃんと決めることにした。

投稿日:

「今さらかよ」という声が聞こえてきそうですが。

前々から「いつかやろう」「これが終わったらしよう」と思いつつ早幾月。
ようやく踏ん切りが付きました。
ので、自分はこういう順番で書きますよー、という宣言的な意味を込めてエントリー。

今までは特にルールもなく、「組んでいくときに追加した順」みたいな感じでした。
もちろん気が付く範囲では調整はしてたので、何となくは統一されてましたが。
他の人からすると恐ろしく読みにくいことになってたんだろうなー、と推測します。
(でも社内で CSS 使えるの僕だけなので他の人が見ることはまぁ無いんですけどね(っていうかそういう状況を何とかするのが先のような気がしないでもなjっs;ぁsdf;jふぁsj))

さて、そんなこんなで今までは何事も無くやってきたのですが、さすがにずっとそのままではまずかろう、という漠然とした動機で決めることにします。
といいつつ、自分で決めた順番ではなくて、基本的には Mozilla の順番を踏襲。
あとは好みとか使い勝手とかで違和感があれば、追々ちょっとずつ変えていこうと思います。

ザックリと調べてみたところによると「 Cascading Style Sheets, Level 2」をベースにしているという人も結構居るようなのですが、プロパティの数が恐ろしく多いので今回はスルーで。

とりあえず、Mozilla からの引用をザッとリストアップ。

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

プリントアウトして、モニタにでも貼り付けときます。

参考サイト







-CSS
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

CSS Nite in OSAKA, Vol.17 に参加してきました。

7/18(土)に開催された「CSS Nite in OSAKA, Vol.17 powered by KAGOYA Internet Routing」に参加してきました。 参加というか、まぁ勉強ですね …

no image

各種ブラウザの印刷のバグが治る(かも知れない)CSS の設定。

float を使って段組みのレイアウトにしているとき、印刷がおかしくなることが多々あります。 というか、おかしくならないことの方が多い。 というか、float を使ってなくてもおかしくなることの方が多 …

no image

今日は裸の日 – CSS Naked Day。

4 月 9 日は「CSS Naked Day」ということなので、便乗してみます。 »CSS Naked Day…公式(?)サイト »そういえば裸の日でした|CSS HappyL …

no image

jQuery で CSS を切り替えて文字サイズを変更する 2 つの方法。

最近、文字サイズの切り替えボタンを設置しているサイトも多くなってきましたね。 自治体や病院など公共性の高いサイトを中心に、導入が進んでいるようです。 僕自身も医療系のサイトに関わることが多いのですが、 …

no image

リスト形式でマークアップした画像の下にできるすき間とその解決法。

よくぶつかる問題の割に忘れがちなので、メモ的エントリー。 画像を ul やら ol やらリスト形式でマークアップする機会って、結構多いんじゃないかと思います。 グローバルナビとか、写真のサムネイルとか …