应该避免直接描述附加样式的类似'floatleft'的类名？
许多网站都使用类似floatleft ， clearfloat ， alignright ， small ， center等类名来描述类的附加风格。 这似乎是有道理的，所以在编写新内容时，您可以轻松地在元素周围包装（例如） <div class="clearfloat">...</div> ，以使其performance得如您所愿。
我的问题是，这种命名types不符合将内容与表示分离的想法吗？ 将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"将起到相同的作用。 是否build议根据附加的样式对元素进行分组以避免在CSS中重复，即使这意味着表示信息会渗入到HTML中？
更新 ：感谢所有的答案。 普遍的共识似乎是为了避免这些类名支持语义名称，或者至less在不妨碍维护的前提下使用它们。 我认为重要的是，布局的变化不应该要求对标记进行过度的改变（尽pipeless数人认为如果整体维护更容易，小的改变是可以的）。 感谢那些提出其他方法来保持CSS代码更小的人。
直到你重新devise，这是很好的， narrow的突出显示黄色， center转换更好的左alignment，而你现在称为floatleft的图像现在属于右侧。
我将承认使用floatleft并clear为CSS类名称的罪过，但是如果select与内容的语义含义相关的名称（如feedback和heroimage ，维护CSS会容易heroimage 。
performance类名
HTML规范在这个问题上是明确的：
对于作者可以在类属性中使用的标记没有额外的限制，但鼓励作者使用描述内容本质的值，而不是描述所需内容呈现的值。
clearleft是否描述内容的性质？ 不是真的。 埃里克·梅耶（Eric Meyer）前段时间就这个问题开了个玩笑 。
试图find看似无关的元素之间的结构关系
假设你有关于鸭子的段落，关于猴子的段落和关于青蛙的段落。 你希望他们有一个蓝色的背景。
<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; }
这是艰难的，并不总是可能的，但重要的是不要放弃。
如果你不能？
如果你有很多元素之间没有任何结构上的联系，那就说明你的文档存在结构性问题。 尝试减less这些元素。 也就是说，将n个 CSSselect符分组在一条规则上比在HTML文档中添加n个表示类标记仍然更好。
风格类应该是语义的 。 这是一个关于语义网页devise的伟大的文章 （嗯，我发现它真的很有帮助）。
编辑：我只是阅读另一篇文章 ，使用一些好点，如display: inline-block ， display: table等，而不是浮动。 这应该有助于避免那些讨厌的floatleft和clearfix类。 让它们变得语义总是由你自己决定。
命名为floatleft ， clear或类似的类的主要问题是devise中的更改意味着HTML标记中的变化。 这不应该发生，只有当您可以在多个devise甚至媒体中重复使用相同的标记时（认为在您的站点的桌面版本和移动版本之间共享相同的HTML并且仅切换统一表格），内容和演示之间才能真正分离。
现在，举一个实际的例子:)。 要添加Fredrik的答案，LESSCSS允许您隐藏开发人员的样式声明/混入。 这样就可以保护样式表中的可重用组件，而不会让它们在HTML中popup。
示例标记：
<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; }
我认为这取决于你如何使用样式。
内容应该相应地命名，因为风格可能会改变，但内容可能保持不变。
例如，如果你有一个包含股票信息的div ，你应该把div命名为div div class="stockInfo" ，这样无论是什么样的表示，你都可以改变样式，名称不会与这些样式矛盾反对命名div div class="yellow" ，然后将background-color更改为红色）。
然而，你将有“帮手风格”，这些应该被命名为他们做什么。
例如，你可能会想用一个<br />来清除一些浮点数。 在这种情况下，将其命名为<br class="clear" />
再一次，大多数网站float他们的图像权利或离开。 为了解决这个问题，你可以设置<img class="right" src="" />和<img class="left" src="" />然后让样式匹配img.right {float:right;}等
所以这取决于使用情况。
描述函数的类名称和ID比使用描述元素样式的名称更好。
但是我通常最终并没有虔诚地做，因为在我看来，通过使用着名的clearfix hack清除浮动元素更加方便，而不是在样式表中添加clear:both 。
但是我认为LESS和SASS创造了两个世界最好的有趣的机会，因为你可以通过包含你想要的任何“风格”来描述一些风格，并且仍然具有语义正确的名字的混合和function。
而不是有这个HTML和CSS
<div class="navigation roundedcorners">...</div> .roundedcorners { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
你可以使用SASS来创build这个mixin：
=rounded-corners -moz-border-radius: 5px -webkit-border-radius: 5px border-radius: 5px
并将其包含到您的.navigation类中，如下所示：
.navigation +rounded-corners-5px
这会减less你的HTML到这个：
<div class="navigation">...</div>
因此仍然可以获得具有语义正确名称的优点，同时还可以方便地在不同元素之间共享样式。
安德鲁; 给你和你的同事在这个项目上工作很容易理解的class级和编号是很好的名字。 对我来说， small ， center ， floatleft等没有任何定义，因为当你给class级中心，这表明中心的元素，但也有其他属性， like color, background etc
例如
<div class="wrap"> <div class="center">lorem</div> </div> css: .center{margin:0 auto;}
在这个例子中，class级center对我不清楚。 但是我们可以使用它们作为辅助类。
例如
<div class="wrap"> <div class="panel center narrow">lorem</div> </div> css: .center{margin:0 auto;}
从上面的例子来看，现在我明白在这个panel div中类center的作用
更多检查这些链接：
在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
如果你的问题是：
是否build议根据附加的样式对元素进行分组以避免在CSS中重复，即使这意味着表示信息会渗入到HTML中？
那么我的答案就是在现实世界中，语义和expression并不是一切。 所以我的答案是：这取决于。
…取决于带宽是否对你很重要…在一个每小时有很多访问者的网站上，那么类名甚至可以简单地变成“c11”（是的，我已经看到了），而不是有意义的，但是looong类名。
…也取决于你是否完全知道当外观和感觉会改变，那么代码也会改变。 （例如：你今天用XHTML重新devise了一个站点，但是你完全知道，当你在两年内重新做CSS的时候，你会希望这个标记是HTML5，所以你几乎可以改变结构。 ..）
还取决于你是否已经迟到了3天。 当你迟到3天时，相信我，像“nopadding”这样的类名开始出现，因为你没有时间思考语义（你的客户也没有）。
取决于这么多的事情，我会说…这是我的“现实生活”的angular度来看你的问题。
从我看到的情况来看，开发人员倾向于用太多的不必要的类和额外的标记来重载HTML页面。 这些类不仅使页面尺寸变大（因而加载时间变长），而且还使页面挤满了页面，并使得以后难以pipe理和修改。
当处理由用户input的显示文本（例如论坛上的post）时，像center和float-left这样的东西可能会有所帮助，但是对于一般标记目的，最好是添加text-align: center和float: left相应的类。 如果您试图在不更改HTML的情况下更改网站的外观，这尤其有用。 硬编码到模板中的越less，修改模板时只需更改CSS就越简单。 这一点是值得的。
作为一般的经验法则，当描述内容是什么时，你应该只给予元素类，而不是在何处或如何显示。 即<span class="movie-information">而不是<span class="bold"> 。
如果你关心search引擎优化，唯一的一次我觉得给一个元素一个类没有必要是有意义的。 如果您有兴趣了解如何添加正确的类实际上可以帮助search引擎，那么您一定要阅读微格式 。 这就是说，添加类描述页面是如何直观显示，对search引擎没有任何作用。
我唯一的一次“分组”的方式是如果他们要么展示同样的东西，要么他们是兄弟姐妹。 当你的页面中有来自所有页面的元素被定义在一起的时候，你的CSS会变得非常混乱。 你最好在你的样式表中将你的类分组，以便稍后能够find它们，而不是通过组合它们来保存几行。
我认为这是旧的技术在networking技术上遇到新的问题。 从过去，很难不显眼地呈现出色的网页体验。 当网站改变网站pipe理员来帮助他们理解代码时，这些类名大多派上用场。 它为它的事业服务，但是用这个时代的新技术，我认为它正在慢慢地消失 – 实际上它应该是死的。
我们应该问的问题是，“我们是否需要为每个可以作为模板的新创新devise创造一个新class级？”。 我不这么认为。 在网站上的标记应该做它的意思 – 标记。 标记中使用的类名应该描述内容而不是外观。 另一方面，样式表应该能够根据标记中的信息select文档上的元素，并对其进行devise。
我想把它和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>或类似的东西）
现在考虑一下你有不同原理的情况。 不同的开发人员和devise人员（如果不是“绝对会”的话）可能会有不同的使用特定命名约定的理由。 这将如何影响重构时间。 我会把它留给你的想象。 此外，如果您的业务合作伙伴注意到吸引stream量的网站主题的新趋势 – 更技术性地说，假设此业务伙伴已经执行了一些实验性的A / Btesting，并提出了一些规格 – 您不想更改整个堆栈（即HTML和CSS和可能的JS页面）来实现这种新的风格 。
总之，保持你的标记样式暗示。 不显眼地与文档进行交互以对其进行devise和操作。 Sass为您提供了一个很好的方式来devise一个网站，同时让您的CSS模拟您的标记。 jQuery是另一个很棒的UJS库。 HTML5也为您提供了方法，使标记更加灵活，并为CSS和JS提供更多信息。
我不认为给你的文档添加一个描述性的类名是一个大问题。 我发现使用诸如“floatleft”之类的显式类名称，而不是纯粹语义上的或依赖级联的东西，会更容易。 对于那些没有文档结构的开发者来说，这样做通常更容易。 你不想把它们用于所有的事情 – 你不想在左浮动的菜单中为每一个li添加一个floatleft类，但是当你需要做一些特定的事情时，这些样式是非常好的一个或多个元素，而您希望让其他开发人员意识到您已经这样做了。 这就像放入<div class="clear">甚至<div style="clear:both;"> ：也许不是最漂亮的，但它肯定是明显的你在做什么。 我的经验法则是：无论什么事情你不得不less想一想。 编辑：正如我在上面我的评论中所说的，对于指向清除和浮动的类来说，这是最真实的，也就是说，纯粹是表示性的，非语义性的，而且必须在HTML中引用。 我认为在这种情况下，实际上最好是指出你正在使用一个纯粹的表示类，比如floatleft，而不是强迫这个float附加到某个语义元素上。
我想，在一天结束时，这是关于什么对你有用。 如果你的类名描述了它的作用，那么这并不违背将标记与样式分开的规则。 另一个要考虑的因素是，你是唯一的开发者，还是团队的一部分？ 如果你是一个团队的一员，或者你知道你的代码将在以后被其他开发者使用，你应该build立和logging使用的命名约定。
我目前正在和一些非常大的项目签署合同，而且我们有一个相当长的关于我们类的命名约定的文档，包括何时使用camel-case，破折号或下划线，以及基于类名的特定前缀在我们工作的项目上。 这听起来很疯狂，但是当你有十几个前端开发人员在同一时间工作，这是一个生命的救星！
你是这样说的：
.red { color:red; }
所以为了使用这个类：
<ul> <li class="red">hello</li> </li>
替代解决scheme
ul li { color:red; }
用法：
<ul> <li>Hello</li> </ul>
通过这个，你实际上可以从内容中删除演示信息。
我个人将他们的名字命名为他们将要做的事情。 假设我有一个图像库上的类，它是一个主要的最常用的类，它将像“画廊”，或者如果我设置的边界周围的东西是更加装饰我将它命名为“decoborder” 。 我尽量保持他们的短小，并且把他们所提供的任务与他们联系起来。 我不喜欢做“小，大，H1线”或任何可以模仿另一个标签或function的东西，因为这可能会让人困惑。 除此之外，我认为你应该以任何对你最有意义的方式来命名它。
如果问题只是一个命名，那么对于一个特定的类 …
class="floatleft"
要么
class="myClass"
要么
class="gibberish"
….完全没有改变。 他们只是不同的类名。 编程function相同。
无论您的内容和演示文稿是分开的，还是不完全不pipe您是如何创build名称的。
对于什么是值得的，如果我没有记错的话，HTML中的class关键字目前并不用于CSS样式表之外的其他任何东西。 因此，你提供的例子…
<div class="foo">Some info about foo</div> ... <div class="bar">Info about unrelated topic bar</div>
…实际上不是一种识别数据的方法。 如果你真的想识别你的HTML标签中的数据，我会build议使用name或id属性。 （它们都有一些不同的用途 – name通常用于服务器端查询，而id可以是样式的，通常是更通用的.ID必须是唯一的，但名称不一定是。）您可以使用W3C HTML规范。
总之 – 不要担心通过标签类将内容绑定到表示上; 直到他们专门用于其他任何事情，他们将不会有任何真正的影响你的原始内容。 因此，只要有意义，我就会说出你想要的类别。 就个人而言，我会在逻辑命名与风格类命名（例如类名“editorcomment”而不是类“graybgfloatleft”或类似的东西）方面犯错，但最终，你的类名不会束缚你的数据到您的演示文稿，如ID或名称会。
祝你好运。
我是程序员之前的开发人员，所以对我来说，我使用类似“floatleft”css类的东西作为一种UtilityMethod。
意思是，我的CSS类是“floatleft”…这就是所有的类。 所以如果我在我的脑海里说<div class="floatleft"></div>那就是说“让这个div浮动到左边”。
所以如果这个Div也需要一个蓝色的背景，并且是我的主标题，那么这个div就会有一个不同的类，我最终会得到<div class="mainheader floatleft"></div>
这样做也可以避免重构问题。 如果以后我改变了devise，我会知道“floatleft”总是把剩下的东西浮起来，只剩下一件事。
我已经做了两个，现在我不得不说，我倾向于使用非表象类名。 我发现这个漂亮的框架称为OOCSS https://github.com/stubbornella/oocss/wiki ，帮助我很多，当我为我的Web应用程序创build一个新的布局，适合我的要求如此之好。
这主要是因为间距，标题和文本的基本类的定义在处理大量内容时运行良好。 因为您在任何地方使用相同的类，所以可以使布局更好，更易于维护。
Offcourse这意味着你的html中的一个元素可能看起来像这样： <div class="unit size1of3 lastUnit">但是不是HTML是关于什么的？ 确保您的信息正确呈现。
我不同意整个重新devise的观点，坦率地说，当你不得不重新devise你的网站时，大多数的CSS都会出来。 而且，通过将CSS分为适当的间距/标题/文本类，就不太可能出现冲突的CSS规则，像ul li div{}
课外课不描述内容，但由于CSS不允许类inheritance，你必须支持像IE6这样的老技术…真的很重要吗？ 而像动物和鸭子这样的类名确实能改善html吗？ 编号喜欢认为HTML是为浏览器和浏览器呈现时，这是人类。
这取决于，有时它是有道理的，只是添加一个类让一个元素浮动。 语义方法的问题是你最终会得到Css类的泥球。 当然，像redLink或者blackHeader这样的名字必须被禁止，但是有时候你会需要像“clear”或“floatLeft”这样的小助手。
阅读这篇深入解释这篇文章的Nicole Sullivan。
我觉得有两件事情经常被完全排除在这些讨论之外。 首先是为什么你想成为所有的语义或全部不是。 关键字是品牌和皮肤。 如果你在一些内部部门网站上工作，品牌和皮肤永远不会在一百万年内获得资金，那么performance性的类名可能是合理的。 另一方面，面向客户的网站，例如汽车制造商和百货公司，生活在一个世界上，每一个新产品的推出都为网站带来全新的外观。 新的颜色，新的布局，新的背景图像和所有这些由devise师带领的应该能够纯粹在CSS中进行改变，所以他们没有机会打破任何工作的PHP（或什么都有）。 也有品牌的网站，你有多个皮肤，可能同时运行在同一个网站。 在具有这种要求的网站上，不能有视觉上的变化影响html，或者最终打破其他品牌，只是为了更新其中的一个。 在这些情况下，语义类名是必要的。
第二个经常被忽视的问题是如何解决由语义类名创build的重复属性组的问题，如下所示：
.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。 我确实看到另一位评论者提到了这一点，但我认为这一点值得强调。
