なぜHTMLの要素のclass名にredやsmallをつけてはならないか

なんとかspotさんで取り上げられていた記事に出てきたHTMLに

<span class="small">hogehoge</span>

という記述がありました。
以前、クラス名にredとか付けていてid:youzakaに注意されたのですが、なぜ駄目なのかということを本質的に理解していなくて今回やっと理解しました。
早い話が、redとかsmallはデザイン上の特徴であって、こんな名前を付けるとデザインと文書構造の分離ができないからです。
HTMLとしては正しいかもしれないですが、本質的には

<font color="red">hogehoge</font>

と書くこととなんら変わりありません。
赤くしたり、小さくしたりするのは何らかの意味があってするはずなので、その意味に沿った名前にするべきです。
最初はredと付けていたものを青くしようと思ったら、cssを変えるだけで変更は可能でも、HTMLはclass="red"のままになってしまい、混乱の元となります。


あと今回のsmallの場合、

<span class="small">って書くくらいならおとなしく<small>って書けばいいのに。Strict DTDにある列記とした要素なのだから。

ヨウザカオオコノハズク on Twitter: "<span class="small">って書くくらいならおとなしく<small>って書けばいいのに。Strict DTDにある列記とした要素なのだから。という話をした。"

とのことです。