html - 是否应该避免直接描述附加样式的 'floatleft' 这样的 css 类名？

Question

许多网站使用像 floatleft 这样的类名, clearfloat , alignright , small , center等描述附加到类的样式。这似乎是有道理的，因此在编写新内容时您可以轻松地换行(例如)<div class="clearfloat">...</div>围绕您的元素，使其按照您想要的方式运行。

我的问题是，这种命名类的风格是否违背了将内容与表示分离的想法？放class="floatleft"在元素上显然是将表示信息放入 HTML 文档。

是否应该避免像这样直接描述附加样式的类名，如果是这样，还有什么替代方案？

---

需要澄清的是，这不仅仅是一个用什么命名类的问题。例如，语义准确的文档可能类似于:

<div class="foo">Some info about foo</div>
...
<div class="bar">Info about unrelated topic bar</div>
...
<div class="foobar">Another unrelated topic</div>

如果所有这些 div 都需要清除 float ，则 css 看起来像这样:

div.foo, div.bar, div.foobar {
    clear:both;
}

随着这些清算元素数量的增加，这开始变得难看 - 而单个 class="clearfloat"会起到同样的作用。是否建议根据附加样式对元素进行分组以避免 CSS 中的重复，即使这意味着表示信息会渗入 HTML 中？

---

更新:感谢您的所有回答。普遍的共识似乎是避免使用这些类名而使用语义名称，或者至少在不妨碍维护的情况下谨慎使用它们。我认为重要的是布局的改变不应该要求对标记进行过多的改变(尽管一些人说微小的改变是可以的，如果它使整体维护更容易的话)。感谢那些提出其他方法来保持 CSS 代码更小的人。

Answer 1

在你重新设计之前一直很棒，narrow 突出显示为黄色，center 转换为更好的左对齐，你调用的图像 floatleft 现在属于右边。

我承认使用 floatleft 和 clear 作为 CSS 类名是错误的，但是如果你选择与内容的语义，如 feedback 和 heroimage。