どうも7noteです。cssを綺麗に書くための手法を紹介していきます。

今回はcssを綺麗に書くための考え方や手法を広めていけたらと思います。

「class名は意味で書く！」

こんな例を見てみましょう。

これを例にcssを作っていきます。

あまりよろしくない例

よろしくない.html

<div class="box1">
    <p>赤色のもの</p>
    <ul>
        <li>炎</li>
        <li>いちご</li>
        <li>りんご</li>
    </ul>
</div>
<div class="box2">
    <p>青色のもの</p>
    <ul>
        <li>空</li>
        <li>海</li>
        <li>スライム</li>
    </ul>
</div>

よろしくない.css

.box1,
.box2 {
    color: #FFF;
    width: 300px;
    padding: 10px;
}
.box1 {
    background: #F00;
}
.box2 {
    background: #00F;
}
.box1 p,
.box2 p {
    font-size: 20px;
}

好ましい例

好ましい.html

<div class="box red-box">
    <p>赤色のもの</p>
    <ul>
        <li>炎</li>
        <li>いちご</li>
        <li>りんご</li>
    </ul>
</div>
<div class="box blue-box">
    <p>青色のもの</p>
    <ul>
        <li>空</li>
        <li>海</li>
        <li>スライム</li>
    </ul>
</div>

好ましい.css

.box {
    width: 300px;
    padding: 10px;
}
.box p {
    font-size: 20px;
}

.red-box {
    color: #FFF;
    background: #F00;
}

.blue-box {
    color: #FFF;
    background: #00F;
}

解説

HTMLの方をみるといっけん上の方が綺麗ですが、CSSを中心に考えていきます。
上の例ではbox1とbox2の2種類のクラスがあり、共通するcssはbox1,box2 {省略}と書くことで1回の記述で完了させていますが、この書き方はあまり好ましくありません。

もし、3つ目に薄いグレーの箱を書かないといけなくなったとすればどうでしょうか。
きっとよろしくない例ならこのように書かないといけなくなります。

よろしくない.html

<div class="box1">
    <p>赤色のもの</p>
    <ul>
        <li>炎</li>
        <li>いちご</li>
        <li>りんご</li>
    </ul>
</div>
<div class="box2">
    <p>青色のもの</p>
    <ul>
        <li>空</li>
        <li>海</li>
        <li>スライム</li>
    </ul>
</div>
<div class="box3">
    <p>灰色のもの</p>
    <ul>
        <li>くもり空</li>
        <li>歯車</li>
        <li>ねずみ</li>
    </ul>
</div>

よろしくない（追記）.css

.box1,
.box2,
.box3 {  /*←追加で記述*/
    color: #FFF;
    width: 300px;
    padding: 10px;
}
.box1 {
    background: #F00;
}
.box2 {
    background: #00F;
}
.box3 {  /*←追加で記述*/
    background: #CCC;  /*←背景色を変更*/
}
.box1 p,
.box2 p,
.box3 p {  /*←追加で記述*/
    font-size: 20px;
}

はい。このように4箇所追加・変更しました。これでうまくいくかと思いきや・・・

うーん、灰色が少し薄いので白い文字が赤や青の箱と比べてみにくくなってしまいました。
このように見た目の弊害が起こります。
別途box3にcolor: #333;を追加しなくてはなりません。合計5箇所の追加・変更になりました。
では、好ましい例で灰色を追加したらどうでしょうか。

好ましい.html

<div class="box red-box">
    <p>赤色のもの</p>
    <ul>
        <li>炎</li>
        <li>いちご</li>
        <li>りんご</li>
    </ul>
</div>
<div class="box blue-box">
    <p>青色のもの</p>
    <ul>
        <li>空</li>
        <li>海</li>
        <li>スライム</li>
    </ul>
</div>
<div class="box gray-box">
    <p>灰色のもの</p>
    <ul>
        <li>くもり空</li>
        <li>歯車</li>
        <li>ねずみ</li>
    </ul>
</div>

好ましい（追記）.css

.box {
    width: 300px;
    padding: 10px;
}
.box p {
    font-size: 20px;
}

.red-box {
    color: #FFF;
    background: #F00;
}
.blue-box {
    color: #FFF;
    background: #00F;
}
.gray-box {  /*←追加で記述*/
    color: #333; /*←文字色を変更*/
    background: #DDD; /*←背景色を変更*/
}

結果

このように一番下に3箇所記述を追加するだけで簡単に変更することができます。
変更が必要な箇所も一番下にまとめて書けばいいので、変更漏れの可能性が低いです。
また他の人がcssを見たときにもわかりやすく並んでいるので、ほかの人が緑の箱を増やさないといけない場面になったときには直感的にgreen-boxというクラス名をつけて、cssの変更・追記を簡単に行うことができます。

一方よろしくない例では、緑の箱、黒の箱、茶色の箱とどんどん増えていくと考えるとどうなるでしょうか。そうですね、cssは長くなり、見た目も汚く管理がしにくくなります。
cssを綺麗に書くということは誰でも触りやすく、管理がしやすいと言うことに繋がるのです。

class名は意味を考えてつけることを意識しましょう。好ましい例ではboxというclassに構造に関係するcssを入れて、見た目の装飾をred-boxやblue-boxというclassに書きました。
このようにそれぞれのclass名に固有の意味を持たせることで、cssを綺麗に書くことができます。