8

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

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

以下是一些示例场景：

1.

一种。

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

.main > div > div

湾。

<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

湾。

<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

湾。

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

.content div

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

4

3 回答 3

11

让对话从正确的角度开始结帐什么是好的 CSS 策略？. 就个人而言，我认为@gregnostic 的策略应该重命名为域。

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

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

重置

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

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

布局

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

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

.row .col {
    width: 100%;
}

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

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

组件/功能

我倾向于对这些非常具体。我最喜欢的模式之一是Stubornella 的 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为.btnthen 您可以简单地将其移动到跨度或停止。

排版

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

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;
}

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

主题

就像排版领域一样，我更倾向于在这个领域进行标签选择。主题几乎按照定义被丢弃（因为例如，塔可钟和麦当劳不想拥有相同的主题）。

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

垃圾抽屉

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

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

div div {
    white-space: nowrap;
}

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

结束语

  • 当我进行包含 CSS 的代码审查时，垃圾抽屉是我唯一希望看到没有很好解释的 id 的地方。
  • 像所有其他代码一样，始终尝试遵循周围代码的模式（除非它让你流血）。
  • 如果我错过了什么，请告诉我
于 2012-04-20T02:56:23.843 回答
6

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

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

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

据我所知，就每个合适的情况而言，没有黑白指南。使用您自己的判断力，并在设计时考虑每种方法的优点/缺点。

于 2012-04-20T01:15:44.500 回答
0

这一切都取决于您的标记的其余部分。考虑您的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 选择相同的元素，而不仅仅是一种“正确”的方式。通常不建议过于具体，但过于笼统的选择器也会导致问题。你必须找到一个平衡点，你只有通过练习才能达到，没有秘诀。

于 2012-04-20T01:02:53.523 回答