後で読みやすいCSSファイルを書くために

教えていて「早めに言っておけばよかったなあ」なこと。

普通は・ホワイトな学園祭運営団体web担当なら、ソレはチームであり複数人で作業に当たるはずです。
膨大な量を1人でやってる?ドンマイ。そんなこともあるさ。

ここで覚えておけ2か条。

  • 1週間前の自分が書いたコードは別人が書いたコード
  • 他人の書いたコードは読むと吐き気がする

つまり、後から読んでも他人が読んでも分かりやすいように最初から書いておくべきですね。その方法CSS版をお送りします。

コメントをつけろ

コメントというのはメモ書きのようなもので、コメントであれば何を書いても他に影響しません。表に表示されません。
例えばこんな風に使います。

ul{
	margin-left:20px; /*リストの●が左に出すぎるのを右にずらす*/
}

一応解説しておくと、ulというのはリストタグで、

  • リストです

とやるもの。ウン、ナンカ、●が左にはみ出ているネ。左にだいたい20pxの余白をつける=20px右にずれる、でなんとかなったりします。
私はサイトを作る時は絶対この調整をするので、1週間経って読んでも「この20pxがないとはみ出てキモイ」というのがわかりますが、複数人だとなんじゃいこりゃあとなりかねませんね。
そこで書いてあるのが/**/です。間には何書いてもオッケー!引継ぎをよこさなかった上司の恨み、引退しても「ソースを表示」でソース読んで書き方にケチつけてくる上司への嫌がらせを書く時!
オススメとしては、「これは○○用の設定」とか、「ここの数値を書き換えると○○が変わる」とかでしょうか。引継ぎを意識して用途・意味を書いておくのも大切ですね。

セレクタを書く順番を決めろ

これこれ。こいつを後輩に言うのを忘れていた。

大がかりにサイトを作ることになるとcssの量は膨大になります。ウチの学園祭公式サイトでメインのcssファイルは370行、これ以外にもサブのcssファイルがごろごろしています。
流石に370行の中から目的のものを探すのは大変です。検索して一発で目的のものを引けるうちはよいのですが。
複数人でcssを書くとなるとあっちこっちに書いちゃうしね。

で。セレクタってのは設定を効かせる対象です。中括弧(開始)の前に書いてあるid名class名タグ名です。
これを基準に書く順番を決めたらどうでしょうか?まあ書く人達で集まって決めりゃいいんです。具体例だけ挙げておきます。俺の例ってやつです。

/*最初に全体に影響するセレクタ*/
*{
	margin:0;
	padding:0;
}
body{
	……
}

/*そのタグすべてに反映させるもの*/
p{
	……
}
ul, ol{
	margin-left:20px;
}

/*汎用的なclass*/
.center{
	text-align:center;
}
.red{
	color:red;
}

/*以下、ページの上部に表示されるものから順に書く*/
header{
	……
}
nav{
	……
}
#main{
	……
}
footer{
	……
}

影響力の強いもの・汎用的でどこにでも登場しそうなものを最初に書いて、後は使う順に書いていくという作戦です。
ネット上に落ちているテンプレートを見てみても、だいたいこんな感じのものが多い印象です。

適度に改行とインデントをつけろ

こういうの、読みにくいから私は好きじゃないんだよね。もし後輩がこういう書きかたしたら書き直させるレベル。

.hoge{font-size:120%;font-weight:200;font-family:メイリオ;text-decoration:underline;}

下2つは許容範囲。

.foo{
font-size:120%;
font-weight:200;
}

.hoge
{
	font-family:メイリオ;
	text-decoration:underline;
}

私はこういう書き方が好きです。cssに限らずあらゆる言語でこんな感じ

.hoge{
	font-size:120%;
	font-weight:200;
	font-family:メイリオ;
	text-decoration:underline;
}