CSS 类名称应该像“floatleft”吗？应该避免直接描述附加样式吗？

Question

许多网站使用类名，例如 floatleft、clearfloat、alignright、small、center > 等描述附加到类的样式。这似乎很有意义，因此在编写新内容时，您可以轻松地将（例如）

...

包裹在元素周围以使其表现良好你想要的方式。

我的问题是，这种命名类的风格是否违背了内容与表示分离的思想？将 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 代码更小的人。

Answer 1

在您重新设计之前，它非常棒，并且 narrow 突出显示为黄色，center 转换得更好左对齐，并且您称为 floatleft 的图像现在属于在右侧。

我承认使用 floatleft 和 clear 作为 CSS 类名是错误的，但是如果您选择与语义相关的名称，维护 CSS 会容易得多内容，例如 feedback 和 heroimage。

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 个表示类标记要好。

Answer 3

样式类应该是语义的。 这是一篇关于语义网页设计的精彩文章 （嗯，我发现它真的很有帮助）。

编辑：我刚刚读了另一篇文章，这使得一些使用诸如 display: inline-block、display: table 等代替浮动的优点。这应该有助于避免那些讨厌的 floatleft 和 clearfix 类。不过，使它们具有语义始终取决于您。

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;
}

Answer 5

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

内容应相应命名，因为样式可能会发生变化，但内容可能会保持不变。

例如，如果您有一个包含股票信息的 div，则应将 div 命名为 div class="stockInfo"，这样无论演示文稿如何，您都可以更改样式，并且名称不会与这些样式相矛盾（而不是命名 div div class="yellow" 然后更改background-color 为红色）。

但是您将拥有“辅助样式”，并且应根据它们的用途来命名它们。

例如，您可能希望使用
来清除一些浮动。在这种情况下，将其命名为
并为其指定样式 br {clear:both;} 是完全合理的。

同样，大多数网站将其图像向右或向左浮动。为此，您可以设置 和 < /code> 然后有要匹配的样式，img.right {float:right;} 等。

所以这取决于用法。

Answer 6

描述功能的类名和 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>

因此仍然具有以下优势 ：语义正确的名称，同时具有在不同元素之间共享样式的便捷方法。

Answer 7

安德鲁；给一个类起一个合理的名字是件好事。 id 易于您理解&您的同事正在从事该项目。对于我来说，类 small 、 center 、 floatleft 等对我来说没有任何定义，因为当你给出类 center 时，这表明该元素位于中心但存在该类中是否还有其他属性，例如颜色、背景等，

例如，

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

css:
.center{margin:0 auto;}

在本示例中，我不清楚类中心。但我们可以将它们用作辅助类。

例如，

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

css:
.center{margin:0 auto;}

从上面的示例中，我现在清楚了类 center 在该 panel div 中的作用

更多信息请检查这些链接：

最好的方法是什么命名CSS 和 HTML 中的 ID 和类？

http://www.ronniesan.com/blog/entry.php?title=organizing-your-dom-elements-with-the-proper-ids

http://cssglobe.com/post/3745/ my-top-10-most-used-css-class-names

Answer 8

如果你的问题是：

是否建议对元素进行分组
根据所附样式避免
CSS 中的重复，即使这样
表示表示信息
渗透到 HTML 中？

那么我的简单回答是，在现实世界中，语义和表示并不是一切。所以我的答案是：这要看情况。

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

...还取决于您是否完全知道当外观和感觉发生变化时，代码也会发生变化。 （例如：您今天用 XHTML 重新设计了一个网站，但您完全知道，当您在 2 年内重新设计 CSS 时，您会希望标记为 HTML5，因此您无论如何都会更改结构。 ..)

...还取决于您是否已经延迟 3 天交货。当你迟到 3 天时，相信我，像“nopadding”这样的类名开始出现，因为你没有时间直接思考语义（你的客户也没有）。

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

Answer 9

据我所知，开发人员倾向于使用太多不必要的类和额外标记来超载 HTML 页面。这些类不仅使页面尺寸变大（从而导致加载时间变长），而且还使页面变得拥挤，使得以后管理和修改变得困难。

当您处理用户输入的显示文本（例如论坛上的帖子）时，使用 center 和 float-left 等内容可能会有所帮助，但是对于一般标记目的，您最好只将 text-align: center 和 float: left 添加到适当的类中。如果您尝试在不更改 HTML 的情况下更改网站的外观，这尤其有帮助。 在模板中硬编码的内容越少，修改模板时只需更改 CSS 就越容易。 仅这一点对我来说就值得了。

作为一般经验法则，您实际上应该只在描述内容内容时才给元素类，而不是内容或如何显示。即 而不是 。

我唯一觉得在不必要的情况下为元素指定一个类是有意义的，那就是如果您关心搜索引擎优化。如果您有兴趣了解添加正确的类如何真正帮助搜索引擎，您绝对应该阅读微格式。话虽这么说，添加描述页面如何视觉显示的类对搜索引擎没有任何作用。

我唯一会对班级进行“分组”的情况是，如果他们要么显示相同的东西，要么他们是兄弟姐妹。当您将整个页面的元素定义在一起时，CSS 中会变得非常混乱。您最好在样式表中对类进行分组，以便以后能够找到它们，而不是通过组合它们来节省几行代码。

Answer 10

我认为这就是网络技术中旧技术与新技术的交汇之处。从过去开始，想要不引人注目地呈现出色的网络体验一直很困难。当网站更换网站管理员以帮助他们理解代码时，这些类名大多会派上用场。它很好地服务了它的事业，但随着当今时代的新技术，我认为它正在慢慢消亡——事实上，它应该消亡。

我们应该问的问题是，“我们是否需要为每个可以作为模板的新创新设计创建一个新类？”。我不这么认为。网站上的标记应该发挥其应有的作用——标记。标记中使用的类名应该描述内容而不是其外观。另一方面，样式表应该能够根据标记中的信息选择文档上的元素，并设置它们的样式。

我想将其与 Rails 协会命名约定联系起来。考虑一下......

class Post < ActiveRecord::Base
    has_one  :personifyable
    has_many :personifications, :through => :personifyable
    has_many :taggables
    has_many :tags, :through => taggables
    belongs_to :destroyers
end

显然，这不是一个真实的模型；这是我用来推动一个观点的东西。考虑深度嵌套依赖的情况。这些名称将变得荒谬 - 如果它们还没有（即在CSS中，

或类似的东西）

现在考虑一下你们有不同原则的情况。不同的开发人员和设计人员可能（如果不是“绝对会”）使用特定命名约定有不同的原因。这将如何影响重构时间。我将把它留给你想象。此外，如果您的业务合作伙伴注意到网站主题吸引流量的新趋势 - 从技术上讲，假设该业务合作伙伴已经执行了一些实验性 A/B 测试并提出了一些规范 - 您不想更改主题的内容整个堆栈（即 HTML 和 CSS 以及可能的 JS 页面）来实现这个新的样式。

总之，不要在标记中添加样式提示。不显眼地与文档交互以设计和操作它。 Sass 为您提供了一种设计网站样式的好方法，同时让 CSS 模拟您的标记。 jQuery 是另一个很棒的 UJS 库。 HTML5 还为您提供了使标记更加灵活并为 CSS 和 JS 提供更多信息的方法。

Answer 11

我不认为在文档中添加描述性类名确实是一个大问题。我发现使用像“floatleft”这样的显式类名比纯粹语义或依赖级联的东西更容易。对于后来的开发人员来说，这通常会更容易，因为他们的头脑中也没有文档结构。
您不想将它们用于所有内容 - 您不会希望向左浮动菜单中的每个 li 添加 floatleft 类，但是当您使用这些样式时，这些样式非常好需要对一个或多个元素执行一项特定的操作，并且您想让其他开发人员知道您已经执行了该操作。
这就像放入

甚至

：也许不是最漂亮的，但它你在做什么是显而易见的。
我的经验法则是：无论什么让你必须少想，就去做。
编辑：正如我在上面的评论中所说，对于引用清除和浮动的类来说，这是最正确的，即纯粹表示性的、非语义的，但必须在 HTML 中引用的东西。我认为在这种情况下，实际上最好表明您正在使用纯粹的表示类，例如 floatleft，而不是强制将浮动附加到某些语义元素。

Answer 12

在成为程序员之前，我是一名开发人员，所以对我来说，我使用“floatleft”css 类之类的东西作为一种 UtilityMethod。
意思是，我的 css 类是“floatleft”...这就是该类所做的全部事情。
因此，如果我在脑海中说

，那就是说“让这个 div 向左浮动”。
因此，如果该 Div 也需要蓝色背景并且是我的主标题，那么它将有一个不同的类，我最终会得到

这样做还可以避免重构问题。如果我稍后改变我的设计，我会知道“floatleft”总是将东西浮动到左边，仅此而已。

Answer 13

我认为，归根结底，关键是什么对你有用。如果您的类名描述了它的用途，那么这并不真正违反将标记与样式分开的规则。另一个需要考虑的因素是，您是唯一的开发人员还是团队的一部分。如果您是团队的一员，或者您知道您的代码稍后将由其他开发人员处理，您应该建立并记录所使用的命名约定。

我目前正在与 Down Jones 就一些非常大的项目签订合同，我们有一份相当长的关于类命名约定的文档，包括何时使用驼峰式大小写、破折号或下划线，以及基于类名的特定前缀关于我们正在进行的项目。这听起来很疯狂，但是当你有十几个左右的前端开发人员同时工作时，它就是一个救星！

Answer 14

我已经完成了这两件事，而且我不得不说现在我倾向于使用非表示性类名。我发现了这个名为 OOCSS https://github.com/stubbornella/oocss/wiki 的漂亮框架当我为我的 Web 应用程序创建新布局时，它给了我很大的帮助，并且非常适合我的要求。

这主要是因为当您必须处理大量内容时，间距、标题和文本的基本类的定义非常有效。因为您在任何地方都使用相同的类，所以它有助于使布局更好且可维护。

当然，这意味着 html 中的元素可以如下所示：

但这不就是 HTML 的含义吗？确保您的信息正确呈现。

老实说，我不同意整个重新设计的观点，当你必须重新设计你的网站时，大多数 CSS 都会被淘汰。而且，通过将 CSS 划分为适当的间距/标题/文本类，就不太可能出现冲突的 css 规则，从而搞乱像 ul li div{}

当然，这些类不描述内容，但由于 CSS 不允许类继承，而且你必须支持像 IE6 这样的旧技术......这真的很重要吗？像animal 和duck 这样的类名真的能让html 变得更好吗？我认为 HTML 是为浏览器服务的，当浏览器呈现它时，那就是为人类服务的。

Answer 15

您所说的内容是这样的：

.red
{
    color:red;
}

因此，为了使用此类：

<ul>
<li class="red">hello</li>
</li>

替代解决方案

ul li
{
    color:red;
}

用法：

<ul>
    <li>Hello</li>
</ul>

通过此操作，您实际上可以从内容中删除演示信息。

Answer 16

我个人给他们命名的名称与他们将要做的事情很接近。假设我有一个位于图像画廊上的类，它是最常用的主要类，它将类似于“画廊”，或者如果我在更具装饰性的事物周围设置边框，我会将其命名为“decoborder” 。我尽量让它们保持半简短，并在某种程度上与它们提供的任务相关。我不喜欢做“小、大、H1下划线”之类的事情，或者任何可以模仿其他标签或功能的事情，因为这只会让人困惑。除此之外，我认为你应该以对你来说最有意义的方式命名它。

Answer 17

如果问题只是命名之一，那么对于一个特定的类...

class="floatleft"

或

class="myClass"

或

class="gibberish"

...绝对不会改变任何内容。它们只是不同的类名。编程功能相同。

您的内容和内容演示文稿是分开的，或者不是……完全不管您如何创建名称。

Answer 18

无论如何，如果我没记错的话，HTML 中的 class 关键字目前除 CSS 样式表外不用于任何其他用途。因此，您提供的示例...

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

...实际上并不是一种识别数据的方法。如果您确实想识别 HTML 标记中的数据，我建议您使用 name 或 id 属性。 （它们的用途略有不同 - name 通常用于服务器端查询，而 id 可以设置样式并且通常更通用。ID 必须是唯一的，但名称不需要不一定是。）您可以使用 查看更多文档W3C HTML 规范。

简而言之 -不必担心通过标签类将内容与表示绑定；除非它们专门用于其他用途，否则它们不会对您的原始内容产生任何实际影响。因此，我想说，只要有意义，就可以随意命名您的课程。就我个人而言，我会错误地选择逻辑命名与样式类型命名（例如，类名“editorcomment”而不是类“graybgfloatleft”或类似的名称），但最终，您的类名不会与您的将数据添加到您的演示文稿中，就像 ID 或名称一样。

祝你好运。

Answer 19

这取决于情况，有时仅仅添加一个类来让元素浮动是有意义的。语义方法的问题在于你最终会得到 css 类的泥球。当然，像 redLink 或 blackHeader 这样的名字必须被禁止，但有时你会需要一些小帮助，比如“clear”或“floatLeft”。

阅读这篇文章妮可·沙利文（Nicole Sullivan）对此进行了深入的解释。

Answer 20

我觉得有两件事经常被完全排除在这些讨论之外。第一个是为什么你想要全部语义化或全部不语义化。关键词是品牌和换肤。如果您在一些内部部门网站上工作，那么展示类名称可能是合理的，这些网站的品牌和换肤在一百万年内永远不会获得资金。另一方面，面向客户的网站（例如汽车制造商和百货商店）生活在这样一个世界中，每推出一个新产品都会为网站带来全新的外观。新的颜色、新的布局、新的背景图像以及所有这些都由设计师领导，他们应该能够纯粹在 css 中进行更改，这样他们就不可能破坏任何正在运行的 php（或你拥有的东西）。还有一些品牌网站，您有多个皮肤，可能同时在同一个网站上运行。在有这一要求的网站上，您不能让视觉变化影响 html，否则您最终会为了更新其中一个品牌而破坏所有其他品牌。在这些情况下，语义类名是必要的。

经常被忽略的第二件事是如何解决由语义类名称创建的重复属性组的问题，如下所示：

.content-nav {
    float: left;
    margin-right: 10px;
    background-color: #ccc;
}

.content-nav .user-photo {
    float: left;
    margin-right: 10px;
    border: solid 1px #000;
}

.content-nav .user-display-name {
    float: left;
    margin-right: 10px;
    text-decoration: underline;
}

人们经常指出这是语义名称的缺点，我认为这是一个有效的观点。另一方面，我想指出，有一些工具可以帮助您保持语义 css DRY，例如 LESS 和 SASS。我确实看到另一位评论者在上面提到了这一点，但我只是认为这一点值得强调。