CSSで、同じクラス名で見た目を変えるのをやめろ。

こんなコードが有りました。

button.css

.button {
  background-color: white;
}

a.css

.page-a .button {
  background-color: red;
}

b.css

.page-b .button {
  background-color: blue;
}

index.html

...
<div class="page-a">
  <button class="button">button1</button>
</div>
<div class="page-b">
  <button class="button">button2</button>
</div>
...

あら不思議。同じクラス名を使っているのに、button1 と button2 では色が違うのです！

もちろん、これくらいのコードなら全部読めばわかります。しかし何十とある css で、同じようなことが行われていたらどうでしょう。その html にかかれている button クラスの見た目は、どこで定義されているのでしょうか。

違うということには意味があるのです。見た目を変えるのであれば、名前も変えなければなりません。決して、html で同じクラス名を使えると楽だという理由で同じクラス名を使ってはいけません。CSS にはマルチクラスにできるという素晴らしいメリットが有るのですから、そちらを使うべきでしょう。

1. html の構造に依存した css を書くのをやめよう
2. 1つのクラス名は、1つの場所で見た目を定義しよう