是否有技术上的理由使用CSS类，如页面左列容器框元素标题

Question

为什么人们使用这种CSS和HTML来设计页面样式？

<div class="page">
<div class="page-left-column">
<div class="page-left-column-container-box">
<div class="page-left-column-container-box-element-header-wrapper">
<h2>This is the header!</h2>
</div>
</div>
</div>
</div>

上面的标记将伴随着这样的CSS规则：

.page-left-column-container-box-element-header-wrapper {
color: red;
}

为什么不这样写呢：

<div class="page">
<div class="left column">
<div class="container-box">
<div class="element header-wrapper">
<h2>This is the header!</h2>
</div>
</div>
</div>
</div>

然后制定CSS规则(也许并非所有这些都是必需的)：

.page .left.column .container-box .element.header-wrapper {
color: red;
}

就我所见，后者比前者好得多。指定CSS规则更容易，而不必将所有内容都复制粘贴到各处，因为您可以指定类似.container-box .element和.column .header-wrapper的规则。在我看来，这也使得规则、代码和所有东西都更易于维护。唯一的缺点是，如果您编写这样的CSS规则：.page .left.column .container-box .element.header-wrapper，那么选择器将依赖于深层HTML层次结构。然而，page-left-column-container-box-element-header-wrapper可能对层次结构没有如此严格的依赖性，但很明显，更改层次结构会让人想要更新"false"类名，不是吗？

我能想象使用page-left-column-container-box-element-header-wrapper这样的类名的唯一原因是，也许使用稍微"复杂"一点的选择器在计算上很昂贵，并且会使浏览器速度变慢。这是真的吗？是否还有其他我没有看到的编程相关/技术优势？还是仅仅是使用多个元素、类和id的规则很复杂？

Answer 1

这两个都是CSS的糟糕例子。

CSS类：

.page .left.column .container-box .element.header-wrapper 

太具体了，这意味着它的可重用性很低。

CSS类：

.page-left-column-container-box-element-header-wrapper

这个词太长了。你可以很容易地将名称缩短为：

header-wrapper

这意味着它可以很容易地在代码的其他地方使用，并且您可以很容易识别元素的用途，它封装了一个标头。

CSS特性：

• http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
• http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
• http://css-tricks.com/specifics-on-css-specificity/

请注意，我不完全同意这些链接上的一些内容，例如"从不"使用ID

简单地说，人们使用这些方法是因为他们在一半的时间里都不知道。

命名约定是一个相当主观的主题，然而，我个人认为CSS类&ID应始终小于20个字符，如果不是10个字符的话但是，它们应该是可以理解的。例如：

.pg-fl-r

很穷。。。而：

.float-right, .page-float-r

etc是一种更好的方式。(这只是一个例子，我不一定建议使用这样命名的类。)