应该避免使用像“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都需要清除浮动，CSS代码将如下：

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

随着这些清除元素数量的增加，情况开始变得混乱不堪——虽然单个 class="clearfloat" 可以实现相同的目的。是否建议根据已附加的样式将元素分组，以避免在 CSS 中重复，即使这意味着演示信息会渗入 HTML？

---

更新：感谢所有的答案。普遍共识似乎是避免使用这些类名，而是使用语义化名称，或者至少适度使用它们，前提是它们不会妨碍维护。我认为重要的是，布局的更改不应该需要过多地更改标记（尽管有一些人说如果这样做可以使整体维护更轻松，则可以进行小的更改）。感谢那些建议其他方法来减小 CSS 代码的人。

- Flash

---

CSS框架以这种事情而闻名。 - BoltClock

不过它没有告诉你有多小。我认为这是一个完全合理的做法。 - Alastair Pitts

也许“small”是个不好的例子，因为它可以描述内容。但是，“floatleft”和“center”肯定描述了演示方式，还有很多其他的例子。 - Flash

我倾向于仅在辅助类中使用这样的名称。当您想要在单个情况下覆盖特定元素的继承行为时 - isNaN1247

Answer 1

在重新设计之前，它很棒，但是当高亮显示“narrow”时，会变成黄色，将“center”左对齐会有更好的转化效果，你所称呼为“floatleft”的图像现在应该位于右侧。

我承认使用“floatleft”和“clear”作为CSS类名是个过错，但是如果你选择与内容语义相关的名称，如“feedback”和“heroimage”，那么维护CSS会容易得多。

- Terence Johnson

---

看到你的澄清，我可以看出你关注CSS变得重复的趋势。虽然我自己还没有使用过，但http://lesscss.org/可能提供了一种解决这个问题的方法。 - Terence Johnson

这个问题的严重性通常被夸大了。有时你必须维护类名以及它们的属性，仅此而已。更大的问题是主观的名称，比如“narrow”：谁能说什么是狭窄的？但我真的不认为具有特定含义的名称（比如floatleft和clear）有任何问题（请参见下面我的回答）。 - David Rhoden

这就是我所说的维护问题。虽然我们希望设计更改不会影响HTML，但你见过这样的情况吗？权衡之处在于花时间通过强制语义来保护你的代码以适应未来，或为未来需要阅读你的代码的开发人员留下易于阅读的大标识。对我来说，没有其他用途而只是为了设计而左浮动的代码应该归类为“floatleft”。 - David Rhoden

@David，我不认为“floatleft”真的是一个class。你可以考虑使用内联样式。 - Gyan aka Gary Buyn

这就是我讨厌Bootstrap的主要原因。 - foobarbecue

Answer 2

展示性类名

HTML规范对这个问题很明确：

作者在类属性中使用的记号没有额外的限制，但鼓励作者使用描述内容本质的值，而不是描述内容所需呈现方式的值。

clearleft 是否描述了内容的本质？并没有。Eric Meyer曾经开过一个玩笑来说明这一点。

试着找到这些看似无关的元素之间的结构关系

假设你有关于鸭子、猴子和青蛙的段落，你希望它们拥有蓝色背景。

<p class="duck"></p>
<p class="monkey"></p>
<p class="frog"></p>

您可以添加以下CSS规则：

p.duck, p.monkey, p.frog {
    background-color: blue;
}

但它们不都是动物吗？只需添加另一个animal标记：

<p class="animal duck"></p>
<p class="animal monkey"></p>
<p class="animal frog"></p>

将CSS规则更改为：

p.animal {
    background-color: blue;
}

这很困难，而且可能并不总是可行的，但重要的是不要轻易放弃。

如果你做不到怎么办？

如果您有很多元素之间完全没有结构关系，那就表明您的文档存在结构问题。尝试减少这些元素。也就是说，将n个CSS选择器分组为一个规则仍然比在HTML文档中添加n个表示类标记要好。

- melhosseiny

---

+1 我认为找到常见样式元素之间的结构关系是关键。问题是我们是否应该为某些事情（如 clear）做出例外。 - Flash

这就是我想要表达的观点。不，不要例外。我们已经不得不使用 float 和 clear 进行布局了（希望在未来不再需要这样做）。你不应该通过添加演示标记来使情况变得更糟。 - melhosseiny

嗨@melhosseiny。 那么我们不应该使用这些类，是吗？ - Hung PD

Answer 3

样式类应该是语义化的。这篇关于语义化网页设计的文章非常棒（至少我觉得很有帮助）。

编辑：我刚读了另一篇文章，介绍了一些使用display: inline-block、display: table等来代替浮动布局的好方法。这可以避免那些讨厌的floatleft和clearfix类。不过，把它们变成语义化的总是由你来决定。

- Gyan aka Gary Buyn

---

+1 为“语义”加分，尽管你的第一句话听起来有点奇怪 :P - BoltClock

Answer 4

将类命名为floatleft、clear或类似名称的主要问题在于，设计更改意味着HTML标记也必须更改。这是不应该发生的情况。只有当您可以在多个设计或媒体中重复使用相同的标记甚至只切换样式表（例如，在桌面版和移动版站点之间共享相同的HTML）时，才能实现真正分离内容和表示。

现在，举个实际例子 :). 除了Fredrik的回答外，LESSCSS允许您从开发人员那里隐藏样式声明/混合。这样，您就可以在没有它们出现在HTML中的危险的情况下保护可重用组件在样式表中。

示例标记：

<div class="branding">Company Name</div>

示例less代码：

// example of reusable functions
.noText() {
    color: transparent;
    text-indent: -9999px;
}
.clear-after() {
    &:after {
        content: ".";
        display: block;
        visibility: hidden;
        height: 0;
        clear: both;
    }
}

.branding {
    .clear-after();
    .noText();
    background-image: ...;
}

当然，对于移动设备，您可能只想以粗体显示公司名称，而不需要其他样式：

.branding {
    color: pink;
    font-weight: bold;
}

- Alex Ciminian

---

第一段描述了为什么那些类型的名称不是一个好主意。 - Ernesto

我喜欢这个答案，因为虽然完全将内容与表现分离是理想的，但没有像LESS这样的预处理器实际上并不切实际。 - David Tang

Answer 5

我认为这取决于你如何使用样式。

内容应该根据名称命名，因为样式可能会改变，但内容可能仍然相同。

例如，如果您有一个包含股票信息的

，您应该将

命名为类似

的东西，这样无论呈现方式如何，您都可以更改样式并且名称不会与这些样式相矛盾（而不是将

命名为

，然后将background-color更改为红色）。

然而，您将拥有“辅助样式”，这些样式应该根据其功能命名。

例如，您可能希望使用
来清除一些浮动。在这种情况下，将其命名为
并给它一个样式
是完全合理的。

同样，大多数网站会将其图像向右或向左浮动。为了辅助此操作，您可以设置和，然后有相应的样式匹配，例如img.right {float:right;}等。

因此，这取决于用法。

- Jason Gennaro

Answer 6

安德鲁；给类和ID起一个易于理解的合理名称对于你和参与项目的成员来说都很重要。对我而言，small, center, floatleft等类别并没有实质意义，因为当你给一个居中的类时，它仅仅表示元素在中心位置，但是这个类还包含其他属性，例如color, background等。

例如：

<div class="wrap">
 <div class="center">lorem</div>
</div>

css:
.center{margin:0 auto;}

在这个例子中，类center对我来说不太清楚。但我们可以将它们用作辅助类。

例如：

<div class="wrap">
 <div class="panel center narrow">lorem</div>
</div>

css:
.center{margin:0 auto;}

从上面的例子可以清楚地看出，在那个paneldiv中，center类的作用。

更多信息请查看以下链接：

CSS和HTML中命名ID和类的最佳方式是什么？

使用适当的ID组织DOM元素

我最常用的十个CSS类名

- sandeep

---

使用多个表示类？！ - BoltClock

像 .fl 代表 float:left;，.rl 代表 float:right;。因此，您可以将它们用作多个类，例如 <div class="panel fl">。 - sandeep

问题在于，通过在 div 中添加 fl，您正在控制 HTML 中的演示。 - Flash

@andrew；就像我所说的那样，使用有意义的类名，比如.animate-panel，而不是center、fl、small、floatleft等等。因为它们只表示该类的一个特征，或者可以参考我的示例。 - sandeep

Answer 7

使用描述功能的类名和ID比使用描述元素样式的名称更好。

尽管如此，我通常不会严格执行这一规定，因为在我看来，通过使用著名的clearfix hack来清除浮动元素比在样式表中添加clear:both更方便。

但是，我认为LESS和SASS可以提供有趣的机会，既可以具有描述某些样式的混合和函数，又可以通过包含所需的“样式”来保持语义正确的名称。

与其使用以下HTML和CSS：

<div class="navigation roundedcorners">...</div>
.roundedcorners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

您可以使用SASS创建此mixin：

=rounded-corners
  -moz-border-radius: 5px
  -webkit-border-radius: 5px
  border-radius: 5px

将其包含在您的.navigation类中，如下所示：

.navigation
  +rounded-corners-5px

这会将您的HTML代码简化为以下内容：

<div class="navigation">...</div>

因此，您仍然可以获得语义正确的名称的优势，同时方便地在不同元素之间共享样式。

- Fredrik

---

感谢提供链接和示例。这确实有助于保持 CSS 更小。 - Flash

Answer 8

如果你的问题是：

是否建议根据附加的样式将元素分组，以避免在CSS中重复，即使这意味着演示信息渗入HTML？

那么我的简单回答是，在现实世界中，语义和表现并不是一切。因此，我的答案是：这取决于情况。

... 取决于带宽对你来说是否重要... 在每小时有许多访问者的网站上，类名甚至可以简单地是“c11”（是的，我见过），而不是有意义但很长的类名。

... 还要看你是否完全知道外观和感觉何时会发生变化，然后代码也会发生变化。 （例如：今天在XHTML中重新设计网站，但您完全知道，当您在2年内重新制作CSS时，您将希望标记为HTML5，因此您将几乎无论如何更改结构...）

... 还要看你是否已经晚了3天。 当你晚了3天时，相信我，“nopadding”之类的类名开始出现，因为你没有时间思考语义（你的客户也是如此）。

我想说，这取决于很多事情... 这是我对你的问题的“真实生活”观点。

- ecchymose

---

+1 我看过很多为了节省带宽而使用难以阅读的代码的网站。我相当确定谷歌也这样做。 - Flash

Answer 9

我认为在文档中添加描述性类名并不是一个大问题。我发现使用明确的类名，如“floatleft”，比纯粹语义或依赖于级联的东西更容易处理。对于后来的开发人员来说，这通常更容易，因为他们没有文档结构在脑海中。 你不想在所有地方都使用它们 - 你不会想在左浮动菜单中的每个li上添加floatleft类，但是当你需要对一个或多个元素进行特定操作时，这种样式非常好，并且您希望让其他开发人员知道您已经这样做了。 这就像放置<div class="clear">甚至<div style="clear:both;">：可能不是最漂亮的，但肯定很明显你正在做什么。 我的经验法则是：无论什么能让你少思考，就去做那件事。 编辑：正如我在上面的评论中所说，这对于引用清除和浮动的类最为真实，即那些完全呈现，非语义化，但必须在HTML中引用的东西。我认为在这种情况下，指示您正在使用纯粹的表示类（例如floatleft）而不是强制将float附加到某个语义元素上实际上更可取。

- David Rhoden

Answer 10

从我所见，开发者有一种倾向，就是在他们的HTML页面中过度使用许多不必要的类和额外的标记。这些类不仅会使页面大小变大（因此加载时间更长），而且还会拥挤页面，使其难以在以后管理和修改。

像center和float-left之类的东西可能在处理用户输入的显示文本（例如论坛上的帖子）时很有帮助，但对于一般的标记目的，最好只是将text-align:center和float:left添加到适当的类中。如果您正在尝试改变站点的外观而不太改变HTML，则尤其有用。 您的模板中硬编码的内容越少，修改模板时只需更改CSS就越容易。 单单这一点就值得我这么做了。

作为一个普遍的经验法则，您真的应该只在元素描述内容的情况下给元素添加类，而不是描述位置或如何显示。例如，<span class="movie-information">而不是<span class="bold">。

我认为只有在关注搜索引擎优化时，才有必要给元素添加类名。如果您想了解如何通过添加正确的类名来帮助搜索引擎，请务必阅读Microformats。尽管如此，添加描述页面视觉显示方式的类名对搜索引擎没有任何作用。

只有当类名显示相同内容或它们是兄弟元素时，我才会“分组”类名。当您在CSS中定义来自页面各处的元素时，会变得非常混乱。最好按照您以后能够找到它们的方式在样式表中分组类名，而不是通过合并它们来节省几行代码。

- Wex