ソースを見やすくするためのスタイルシート・コードフォーマット

2011年11月30日

スタイルシートを作成するときに、ただスタイルを羅列していくだけでは、後から見てどこに何が書いてあるのかわからず、メンテナンス性が非常に悪くなってしまいます。そこで、今回はスタイルシートを書くときに気を付けたいことをご紹介します。

半角スペースを使う

スタイル名とスタイルプロパティの後ろに一つ入れます。

1.text{
2    text-align:center;
3}

○

1.text {
2    text-align: center;
3}

改行をする

セレクタ、スタイルプロパティごとに改行を入れます。

text01 {text-align: left;}
text02 {text-align: right; color: #000000;}
text03 {text-align: left;}
text04 {text-align: right; color: #000000; margin: 0 10px 0 20px;}
text05 {text-align: left; margin: 0 10px 0 20px;}
text06 {text-align: right; color: #000000; margin: 0 10px 0 20px; font-weight: bold;}
text07 {text-align: left; margin: 0 10px 0 20px;}
text08 {text-align: right; color: #000000; margin: 0 10px 0 20px;}
text09 {text-align: left;}
text10 {text-align: right; color: #000000; margin: 0 10px 0 20px;}

○

01.text01 {
02    text-align: left;
03}
04 
05.text02 {
06    text-align: right;
07    color: #000000;
08}
09 
10.text03 {
11    text-align: left;
12}
13 
14.text04 {
15    text-align: right;
16    color: #000000;
17    margin: 0 10px 0 20px;
18}
19 
20.text05 {
21    text-align: left;
22    margin: 0 10px 0 20px;
23}
24 
25.text06 {
26    text-align: right;
27    color: #000000;
28    margin: 0 10px 0 20px;
29    font-weight: bold;
30}
31 
32.text07 {
33    text-align: left;
34    margin: 0 10px 0 20px;
35}
36 
37.text08 {
38    text-align: right;
39    color: #000000;
40    margin: 0 10px 0 20px;
41}
42 
43.text09 {
44    text-align: left;
45}
46 
47.text10 {
48    text-align: right;
49    color: #000000;
50    margin: 0 10px 0 20px;
51}

インデントを挿入する

スタイルプロパティの前に一つ入れます。CSSハックの前にさらにもう一つ入れると、全体として見やすくなります。

1.text {
2text-align: center;
3color: #000000;
4margin: 0 10px 0 20px;
5}
6* html .text{
7text-align: left;
8}

○

1.text {
2    text-align: center;
3    color: #000000;
4    margin: 0 10px 0 20px;
5}
6    * html .text{
7        text-align: left;
8    }

CSSハックの前にもう一つインデントを入れる理由は、それがCSSハックであると一目で判別できるようになるためです。ハックも含め、すべて同じインデントレベルでスタイルを記述すると、ハックであると気付かずに、通常のスタイルだと思って記入ミスをしてしまう可能性があります。

コメントを入れる

編集するときのためのガイドとなります。
大コメントと小コメントにわけ、大コメントは基本設定やヘッダー・コンテンツなどの大枠の説明に用い、小コメントはそれ以外に用います。

01/*-----------------------------
02　　基本設定
03------------------------------*/
04body {
05    ～
06}
07/* 文字を赤くするとき */
08.text {
09    color: red;
10}

以上のように、ほんの少し気を付けるだけで、ソースの見やすさは格段に向上します。