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可能没有对层次结构的这种硬依赖性，但显然更改层次结构会使人想要更新“假”类名称，不是吗？

我可以想象使用像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特异性：

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

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

命名约定是一个非常主观的主题，但我个人认为CSS类和＆amp;如果不是10，则ID应始终低于20个字符。但，它们应该是可以理解的。例如：

.pg-fl-r

穷人......而是：

.float-right, .page-float-r

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

是否有技术原因使用CSS类，如page-left-column-container-box-element-header？

1 个答案: