1

为什么人们使用这种 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可能对层次结构没有如此强烈的依赖关系，但显然改变层次结构会让人想要更新“假”类名，不是吗？

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

4

1 回答 1

4

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

CSS 喜欢：

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

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

CSS 喜欢：

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

就是一个字太长了。您可以轻松地将名称缩短为：

header-wrapper

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

CSS 特殊性：

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

简而言之，人们使用这些方法是因为他们在一半的时间里都不知道更好。

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

.pg-fl-r

很穷……而：

.float-right, .page-float-r

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

于 2012-09-24T17:11:17.080 回答