[CSS]スタイルシートの記述をより読みやすくする5つのルール

スタイルシートの記述をより読みやすくする5つのルールをWoork Upから紹介します。

5 Rules To Write More Readable CSS Files

1. プロパティをアルファベット順に

各エレメントのプロパティの記述順をアルファベット順にします。

#nav{
    border: solid 1px #DEDEDE;
    color: #000;
    padding: 10px;
    width: 650px;
}

2. 子をインデント

子のエレメントをインデントします。

#nav{
    width:650px;
}
    #nav ul li{
        float:left;
    }
        #nav ul li a{
            display:block;
        }

3. コメントでセクション分け

コードのリーダビリティを改善するにはコメントはとても有用です。
ここではHTMLドキュメントの構造と同じようにセクションごとにコメントを使用します。

/*-------------------
HEADER
------------------- */
#header{width:650px;}
    #header a:link,
    #header a:visited{
        color:#0033CC;
    }

/*-------------------
NAVIGATION BAR
------------------- */
#nav{width:650px;}
    #nav ul li{
        float:left;
        padding:0 10px;
}

4. スペースでツラ揃え

スペースで値のツラを揃えます。リーダビリティは確保されますが、一般的にはあまり使用されないと思います。

#main{
    width: 650px;
}
    #main h1{
        color:          #000;
        font-size:      22px;
        font-weight:    bold;
    }
    #main p{
        color:          #000;
        font-size:      12px;
        padding:        10px;
    }

5. 同じプロパティをグルーピング

エレメントのグループ内で同じプロパティをまとめます。一つの指定で同様の箇所を修整することができます。
下記のコードが元のものです。

.icon-facebook {
   background:url(facebook.gif);
    padding-left:  26px;
    margin-right:  20px;
    width:        100px;
}
.icon-twitter {
   background:url(twitter.gif);
    padding-left:  26px;
    margin-right:  20px;
    width:        100px;
}
.icon-delicious {
   background:url(delicious.gif);
    padding-left:  26px;
    margin-right:  20px;
    width:        100px;
}

上記のコードを下記のように改善します。

.icon-facebook,
.icon-twitter,
.icon-delicious {
    padding-left:  26px;
    margin-right:  20px;
    width:        100px;
}
.icon-facebook{background:url(facebook.gif);}
.icon-twitter{background:url(twitter.gif);}
.icon-delicious{background:url(delicious.gif);}