CSS 类和后代选择器实践

Question

我想更好地理解何时使用类来定位内容而不是其他可用选项，特别是后代选择器。

在许多情况下，可以使用后代选择器来定位相同的元素，而不是使用类。如果同一件事可以通过两种方式完成，那么决定一个选项之间的逻辑是什么？

以下是一些示例场景：

1.

一个。

<div class="main">
     <div>
         <div> /* target */
             <div></div>
         </div>
     </div>
</div>

.main > div > div

b.

<div class="main">
     <div>
         <div class="content">
             <div></div>
         </div>
     </div>
</div>

.content

2.

一个。

<div class="main">
     <div> /* target */
        <div></div>
     </div>
     <div> /* target */
        <div></div>
     </div>
</div>

.main > div:first-child
.main > div:last-child

b.

<div class="main">
     <div class="content1">
        <div></div>
     </div>
     <div class="content2">
        <div></div>
     </div>
</div>

.content1
.content2

3.

一个。

<div class="main">
     <div>
         <div></div>
         <div></div>
         <div></div>
     </div>
</div>

.main > div div

b.

<div class="main">
     <div class="content">
         <div></div>
         <div></div>
         <div></div>
     </div>
</div>

.content div

决定使用类还是后代选择器之间的逻辑是什么？

Answer 1

要在右脚结帐What is a good CSS strategy? 上开始对话。就个人而言，我认为@gregnostic 的策略应该重命名为域。

在我看来，每个拥有十几个网页的项目确实需要根据其范围在一定程度上实现各个领域。

这里的域是（按特异性排序）：

重置

尝试实现跨浏览器和环境条件的基线。因Eric Meyer 而出名。很多人跳过这个作为一个已解决的问题，但作为一个在页面内容管理系统上工作的人，相信我 CSS 重置很重要，并且可能是一个优雅地解决的具有挑战性的问题（尤其是如果客户使用相同的主题库）。

这些选择器应尽可能通用。基于 CSS 类的选择通常没有任何意义，除非您有时需要在给定的 shell 中重置。

布局

潜在的页面结构，通常由某种网格系统处理。这些应该更具体一些，但应该依赖于某种递归模式。比如：

.row {
    width: 100%;
    min-height: 30px;
} 

.row .col {
    width: 100%;
}

    .row.two .col {
        width: 50%;
    }

虽然这可以通过标签选择来完成，但我发现它对于下一个人来说几乎从来都不是直观的，而且你总是会在错误的地方神奇地出现 grid。使用类有助于使 垃圾抽屉^TM 更小。如需全面实施，请参阅：

• 960Grid System
• Twitter Bootstrap
• Columnal
• 其他很多。

组件/功能

我倾向于在这些方面非常具体。我最喜欢的模式之一是Stubornella's OOCSS。基本概念是，为了最大限度地减少重复代码，您将属性捆绑在各种 CSS 选择器中，并尽最大努力使它们一起发挥作用。一个简单的例子是Twitter Bootstrap 的按钮。

虽然您可能可以在这里捏造子选择器，但我强烈建议您不要这样做，因为这是第一次有人想要更改：

<button type="button"></button>

到：

<button type="button">
    <span class="ugly-orange-bordered-purple-thing">
        My Button
    </span>       
</button>

过于笼统：

button {
    border: 99em purple dotted;
}

将完全冲突：

.ugly-orange-bordered-purple-thing {
    border: 5em orange dashed;
    background-color: purple;
}

但是，如果您将 button 更改为 .btn，那么您可以简单地将其移至 span 或直接离开。

排版

在给定条件下处理各种字体的适当显示。我总是尽可能地处理这个元素选择器。我通常用类似这样的方式开始它：

h1, h2, h3, h4, h5, h6 {
    font-family: sans-serif;
}

p, span, a, ... {
    font-family: serif; /* Or whatever. */
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.8em;
}

... 

.row h2 {
    font-size: 1.6em;
}

根据客户的需要，我什至可以在按钮内添加跨度规则。

主题

很像 Typography 领域，我更倾向于在这个领域进行标签选择。主题几乎按照定义被丢弃（例如，Taco Bell 和 Mc Donald's 不想拥有相同的主题）。

Dojo 工具包有一些很好的例子，可以将主题设置为单独的层（结帐nihilo）。他们倾向于这里的类，但这主要是为了可重用性，我已经讨论过。

垃圾抽屉

CSS 的垃圾抽屉，希望大部分都包含在 <!--[if lt IE 9]> 中，但每个项目都有这些，它们应该放在最后。保持这个空是一个优先事项，但它并不像完成工作那么重要（我一直试图提醒自己）。

我让这些非常具体，因为您最不想做的就是更改规则，例如：

div div {
    white-space: nowrap;
}

在一个几乎完整的网站上。只要有可能，我就把它们放在工作场所友好的“遗留”区域。

结束语

• 当我进行包含 CSS 的代码审查时，垃圾抽屉是我唯一希望看到没有很好解释的 id 的地方。
• 与所有其他代码一样，始终尝试遵循周围代码的模式（除非它让您流血）。
• 如果我遗漏了什么，请告诉我

Answer 2

后代选择器允许您避免在 html 中嵌入类信息。当包装块是逻辑容器时，这可能很方便。例如，如果您使用div 标记构建了一个表格，并且您有数百或数千行，您可以通过指定后代样式而不是重复指定class='...' 来减少文档大小并提高可读性。

  <div class='mytable'>
    <div></div>
    <div></div>
    <!-- A LOT MORE ROWS -->
  </div>

指定一个类的好处是您不受特定顺序的约束。每次要重新排列视图时都必须更改后代标签可能会非常令人沮丧。指定类的另一个好处是，在使用 CSS 时，搜索特定的类名比解读后代块要容易得多。

据我所知，并没有黑白两色的指导方针，只要每一个都合适。使用您自己的判断力，并在设计时考虑每种方法的优缺点。

Answer 3

这完全取决于您的标记的其余部分。考虑一下您的 1.a 示例的修改版本：

<div class="main">
     <div>
         <div> /* target */
             <div></div>
         </div>
     </div>
     <div>
         <div> /* target? */
             <div></div>
         </div>
     </div>
</div>

选择器.main > div > div 将选择两个 div，这可能是也可能不是您想要的。因此，有时您必须更具体，向标记添加类和 id，并相应地调整选择器。

使用 CSS 选择相同元素有多种方式，而不仅仅是一种“正确”方式。通常不建议过于具体，但过于笼统的选择器也会导致问题。你必须找到一个平衡点，只有通过练习才能达到平衡，没有秘诀。