RedLine Magazine : 自分もプロパティの書き順とか

自分もプロパティの書き順とか

CSS HappyLife の中の人がTwitterでブログのネタが無いってぼやいてたので、プロパティ（宣言）の書く順番が気になるからそれネタにしてくだせーってリクエストしたら書いてくださったヽ(´ー｀)ノ

ありがとうございますありがとうございますー！

何で今頃そんな事が気になったのかと申しますと、CSSのプロパティをアルファベット順に書くと探してる箇所を見つけるのが速くなるぜという話をこちらで拝見したんですよ。「2. Alphabetize」ってとこね。

5 Ways to Instantly Write Better CSS - NETTUTS

まぁそれもひとつの手だなぁとは思った。日本人なのであまりアルファベット順を普段意識しないし、私自身がそれを実行して速くなるかどうかは不明だけれども。

複数人で作業する時にちゃんとしたガイドラインなしでやってるとプロパティの順番がバラバラで他人が見ると読みにくいものになってしまったって経験もあるんですが、特別なガイドラインがなくても「アルファベット順に書こうぜ！」って一言言えば済むっつーのはラクでいいなｗ

私も真似して自分流に並べてみる

CSS HappyLifeさんがMozillaのを自分流に並び替えてらっしゃったので私もやってみよ。

clear
float
position
display
width
height
background
color
font
text-align
text-decoration
other text
list-style
vertical-align
white-space
content
border
padding
margin

これ、私がデザインを絵で見て、htmlソース書いて、CSS書くぞーって考えたときに、頭の中で発想する順番なんですよ。絵を見て頭の中でCSSに変換しながらそのまま書くとスピードも速くなります（当社（私）比）カッコよく言ってみると指が流れる感じ（何）

ここclearすんのー？浮かすのー？位置つけるのー？幅なんぼ？高さはいくらー？背景つけんの？みたいな感じで脳内でデザイン見ながら対話。まぁ要するに外枠作ってから中身考えるって感じなんだな。･･･いちいちこんな事書かなくても至って普通の考え方じゃねーか。

line-heightとletter-spacingは2つとも指定するならいつも縦に並べる。これは上のサイトみたいにアルファベット順どうこうじゃなくて、単にソースをパっと見たときの個人的な字面の好みというか･･･なんか揃えたいやん。text-align、text-decoration、text-indentも同じ原理で絶対並べる。

list-style、white-space、contentは普段あまり使わないから実際この位置にいれるかどうかはわかんないな。まぁその3つは適当。

で、私が普段扱ってるデザインはどちらかというと、padding・marginは最終段階で微調整する事が多いので（絵的にそのボックスあと2pxさげて！いや、もうあと1px！みたいな）末尾においておくようにすると探しやすいっていうか探さなくても絶対そこにあるって分かるので速いんですね。なので末尾に。

borderとbackgroundの書き方はCSS HappyLife の中の人とまったく同じでした。わーい。

全然関係ないけど、今気に入らない事があってCS4にバージョンアップしたらCSSの閉じ括弧･･･なんかインデントが左端に戻っちゃうんですけど。私の好みはこういうの。

.sample{
	width:300px;
	height:300px;
	}

バージョン8まではそうなってくれてたのにCS4だったらこうなっちゃう。

.sample{
	width:300px;
	height:300px;
}

まぁ別にどっちでもいいんですけど、ほら、あれだ。前使ったソース、ガバっとコピーしたい時とかさ、なんかそこだけ閉じ括弧にインデントついてて新しいソースはインデントついてないとか･･･こういうのはぜったいどっちかに統一したいので、そこだけなおせばいいだけの話だけどなんか面倒じゃん＞＜
あ。ソースフォーマットとかで一括で揃えるという手もあるな。