Zenn
🧚‍♀️

HTMLのIDやクラスが長すぎてはいけない理由

2022/09/24に公開
CSS
HTML
初心者
Web
tech

こんにちは。深緑です。
期末進行でドタバタしております。

今回は、急にWEB案件をやり始めた若手にしょうもないけど大事だと思うことを伝えたので記録します。

<html>

<body>
    <div>
        <div>
            <div>
                <div id="food-hamburger-mcdonalds"></div>
            </div>
        </div>
    </div>
</body>

</html>

#food-hamburger-mcdonalds {
    width: 1024px;
}

HTMLやCSSに慣れないうちは他に影響が出るのが怖いので、
ピンポイントで要素を特定できるIDやクラスを与えたくなります。
とはいえ実際のシステムではHTMLは大量にあるので、結果的にIDやクラスは長くなります。

これをそのままにしておくと、他の人がこれを参考した時、
長いのが気になって「省略系」が生まれ始めます。

<html>

<body>
    <div>
        <div>
            <div>
                <div id="food-hamburger-mac-east"></div>
            </div>
        </div>
    </div>
</body>

</html>

<html>

<body>
    <div>
        <div>
            <div>
                <div id="food-hamburger-macd-west"></div>
            </div>
        </div>
    </div>
</body>

</html>

・・・なんか個性が出てきましたね。
これはまあ地方ネタなんですが、クラス名が英単語でもよく起きます。
経験上、英単語は知っていても省略形まできっちり調べたりする人は少ないと思います。
正しい省略形はあんまり知られてないので人の個性が強く出るという次第です。
これを繰り返して行くと保守性は下がっていきます。

取り急ぎ個性の強い省略形が生まれないようにするには、
上の階層にIDやクラスをつけて、自分の世界をつくる方法があります。

目的の要素そのものではなく、その上で枝分かれさせる方法です。
要素が多くなればなるほど恩恵を感じやすいと思います。

<html>
	
<body>
    <div id="east">
        <div>
            <div>
                <div id="food-hamburger-mcdonalds"></div>
                <div id="food-noodles">SOBA</div>
            </div>
        </div>
    </div>
</body>

</html>

#east #food-hamburger-mcdonalds {
    width: 768px;
    height: 40px;
}
#east #food-noodles {
    width: 768px;
    height: 20px;
}

より良いのは階層をきっちり作ることだと思います。

<html>

<body>
    <div id="east">
        <div class="food">
            <div class="hamburger">
                <div id="mcdonalds"></div>
            </div>
            <div id="noodles">SOBA</div>
        </div>
    </div>
</body>

</html>

#east .food .hamburger #mcdonalds {
    width: 768px;
    height: 40px;
}
#east .food .noodles {
    width: 768px;
    height: 20px;
}

個々のIDやクラスが長くなりすぎないように気をつけて行きましょう。
小さいことはいいことだと思います。

Discussion