html - 是否应该避免直接描述附加样式的 CSS 类名称，例如“floatleft”？

Question

许多网站使用类名，如, , ,floatleft等clearfloat来alignright描述附加到类的样式。这似乎是有道理的，因此在编写新内容时，您可以轻松地将（例如）包裹在您的元素周围，使其按照您想要的方式运行。smallcenter<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 代码更小的人。

score 42 · Accepted Answer

在您重新设计之前很好，并且narrow以黄色突出显示，center转换更好的左对齐，并且您floatleft现在调用的图像属于右侧。

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

score 36 · Accepted Answer

表现类名

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

score 19 · Accepted Answer

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

编辑：我刚刚阅读了另一篇文章，该文章对使用display: inline-block,display: table等而不是浮点数提出了一些好处。这应该有助于避免那些讨厌floatleft的clearfix课程。不过，使它们具有语义始终取决于您。

score 14 · Accepted Answer

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

score 6 · Accepted Answer

安德鲁; 给一个类和 id 起一个合理的名字是很好的，这对你和你正在从事该项目的其他成员来说很容易理解。对我来说，类，small等等对我没有任何定义，因为当你给类中心时，这表明元素在中心，但该类中还有其他属性centerfloatleftlike color, background etc

例如

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

从上面的例子现在我很清楚类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

score 6 · Accepted Answer

描述函数的类名和 id 比使用描述元素样式的名称更好。

不过我通常最终不会虔诚地这样做，因为在我看来，通过使用著名的 clearfix hackclear:both来清除浮动元素比在样式表中添加所有内容更方便。

但我认为LESS和SASS创造了有趣的机会来充分利用这两个世界，因为你可以拥有描述某种风格的 mixin 和函数，并且通过包含你想要的任何“风格”仍然具有语义正确的名称。

而不是拥有这个 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>

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

score 6 · Accepted Answer

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

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

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

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

例如，您可能希望使用 a<br />来清除一些浮点数。在这种情况下，将其命名<br class="clear" />并赋予其样式是完全合理的br {clear:both;}。

同样，大多数网站float的图像都在左右。为了帮助解决这个问题，您可以设置<img class="right" src="" />然后<img class="left" src="" />让样式匹配img.right {float:right;}等。

所以这取决于使用情况。

score 4 · Accepted Answer

如果您的问题是：

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

那么我的直截了当的回答是，在现实世界中，语义和表示并不是一切。所以我的回答是：视情况而定。

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

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

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

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

score 3 · Accepted Answer

据我所见，开发人员倾向于使用太多不必要的类和额外的标记来超载他们的 HTML 页面。这些类不仅使页面更大（因此加载时间更长），它们还使页面变得拥挤，使以后难以管理和修改。

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

作为一般的经验法则，你真的应该只在描述内容是什么时给元素类，而不是在哪里或如何显示它。即<span class="movie-information">代替<span class="bold">.

唯一一次我觉得在没有必要时给元素一个类是有意义的，那就是如果你关心搜索引擎优化。如果您有兴趣了解添加正确的类如何真正帮助搜索引擎，那么您绝对应该阅读Microformats 。话虽如此，添加描述页面视觉显示方式的类对搜索引擎没有任何作用。

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

score 3 · Accepted Answer

我认为这是网络技术中新旧事物相遇的地方。从过去开始，很难不引人注意地呈现出色的 Web 体验。当网站更换站长以帮助他们理解代码时，这些类名大多派上用场。它很好地服务于它的事业，但随着当今时代的新技术，我认为它正在慢慢消失——事实上，它应该已经死了。

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

我想将此与 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 中，<div class='mediumwidth floatright centeredtext graytheme master'></div>或者类似的东西）

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

总之，将样式提示保留在您的标记之外。与文档进行不显眼的交互以对其进行样式设置和操作。Sass为您提供了一种设置网站样式的好方法，同时让您的 CSS 模拟您的标记。jQuery是另一个很棒的 UJS 库。HTML5也为您提供了使标记更加灵活并为 CSS 和 JS 提供更多信息的方法。

score 3 · Accepted Answer

我是程序员之前的开发人员，所以对我来说，我使用类似“floatleft”css 类的东西作为一种 UtilityMethod。
意思是，我的 css 类是“floatleft”......这就是该类所做的一切。所以如果我<div class="floatleft"></div>在心里说“让这个 div 向左浮动”。
因此，如果该 Div 也需要蓝色背景并且是我的主要标题，那么它将有一个不同的类，我最终得到<div class="mainheader floatleft"></div>

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

score 3 · Accepted Answer

我不认为在你的文档中添加一个描述性的类名真的是一个大问题。我发现使用像“floatleft”这样的显式类名比使用纯语义或依赖级联的东西更容易。对于没有头脑中的文档结构的后来的开发人员来说，这通常更容易。你不想在所有事情上都使用它们——你不想给li左浮动菜单中的每一个都添加一个 floatleft 类，但是当你需要对一个菜单做特定的事情时，这些样式非常好或更多元素，并且您想让其他开发人员知道您做到了。这就像投入<div class="clear">甚至<div style="clear:both;">: 也许不是最漂亮的，但很明显你在做什么。我的经验法则是：无论什么让你不得不少想，就那样做。编辑：正如我在上面的评论中所说，这对于引用清除和浮动的类来说是最正确的，即纯粹的表现性、非语义的东西，但必须在 HTML 中引用。我认为在这种情况下，实际上最好表明您正在使用纯表示类，如 floatleft，而不是强制浮动附加到某个语义元素。

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

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

class="floatleft"

或者

class="myClass"

或者

class="gibberish"

....完全没有改变。它们只是不同的类名。编程功能相同。

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

score 1 · Accepted Answer

我都做过，我不得不说现在我倾向于使用非展示类名。我发现了这个名为 OOCSS https://github.com/stubbornella/oocss/wiki的漂亮框架，当我为我的 Web 应用程序创建新布局并非常适合我的要求时，它帮助了我很多。

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

当然，这意味着您的 html 中的元素可以如下所示：<div class="unit size1of3 lastUnit">但这不就是 HTML 的意义所在吗？确保您的信息正确呈现。

我不同意整个重新设计的观点，老实说，当你必须重新设计你的网站时，大多数 CSS 无论如何都会被淘汰。而且，通过将 CSS 划分为适当的类以用于间距/标题/文本，它变得不太可能有冲突的 css 规则，比如ul li div{}

当然，类不描述内容，但由于 CSS 不允许类继承，你必须支持像 IE6 这样的旧技术......真的很重要吗？像动物和鸭子这样的类名真的会产生更好的 html 吗？我想认为 HTML 是用于浏览器的，当浏览器呈现它时，那就是人类。

score 1 · Accepted Answer

你在说这样的话：

.red
{
    color:red;
}

所以为了使用这个类：

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

替代解决方案

ul li
{
    color:red;
}

用法：

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

这样，您实际上可以从内容中删除演示信息。

score 1 · Accepted Answer

我个人将他们命名为接近他们将要做的事情。假设我有一个在图片库中的类，它是最常用的主要类，它将类似于“画廊”，或者如果我在旨在更具装饰性的事物周围设置边框，我将其命名为“decoborder” . 我尽量让它们保持半简短，并且在某种程度上与它们提供的任务相关。我不喜欢做诸如“小、大、H1underlined”之类的事情，或者任何可以模仿另一个标签或功能的事情，因为那样会让人感到困惑。除此之外，我认为您应该以对您最有意义的方式真正命名它。

score 1 · Accepted Answer

对于它的价值，如果我没记错的话class，HTML 中的关键字目前不用于 CSS 样式表以外的任何东西。因此，您提供的示例...

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

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

简而言之——不用担心通过你的标签类将内容与展示联系起来；除非它们专门用于其他任何事情，否则它们不会对您的原始内容产生任何实际影响。因此，只要有意义，我会说任何你想要的名字。就个人而言，我会在逻辑命名与样式类型命名方面犯错（例如，类名“editorcomment”而不是类“graybgfloatleft”或类似的东西），但最后，你的类名不会与你的将数据添加到您的演示文稿中，例如 ID 或名称。

祝你好运。

score 0 · Accepted Answer

我觉得有两件事经常被完全排除在这些讨论之外。第一个是为什么你想要全部语义化或全部不语义化。关键词是品牌和皮肤。如果您在一些内部的部门网站上工作，那么展示类名称可能是合理的，在这些网站上，品牌和皮肤设计在一百万年内永远不会获得资金。另一方面，面向客户的网站，例如汽车制造商和百货公司，生活在这样一个世界中，每一个推出的新产品都会为网站带来全新的外观。新的颜色、新的布局、新的背景图像以及所有这些都由设计师领导，他们应该能够纯粹在 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。我确实看到其他评论者在上面提到了这一点，但我只是认为这一点值得强调。

score 0 · Accepted Answer

这取决于，有时只是添加一个类来让元素浮动是有意义的。语义方法的问题是你最终会变成一堆 css 类的泥球。当然，必须禁止使用 redLink 或 blackHeader 之类的名称，但有时您需要像“clear”或“floatLeft”这样的小助手。

阅读Nicole Sullivan 的这篇文章，她对此进行了深入的解释。

html - 是否应该避免直接描述附加样式的 CSS 类名称，例如“floatleft”？

20 回答 20

Related

Reference