Question

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

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

以下是一些示例方案：

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

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

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更小。有关全面实施，请参阅：

组件/功能

我倾向于对这些问题非常具体。我最喜欢的模式之一是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，那么您只需将其移至跨度或刚离开。

印刷术

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

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

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

主题

与排版域非常相似，我倾向于在此区域进行标签选择。几乎按照定义抛出主题（例如，Taco Bell和Mc Donald's不希望具有相同的主题）。

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

垃圾抽屉

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

我认为这些非常具体，因为你想要的最后一件事就是改变一条规则：

div div {
    white-space: nowrap;
}

在一个几乎完整的网站上。在可能的情况下，我将这些放在工作场所友好的“遗产”区域。

结束笔记

当我对其中包含CSS的代码评论进行编码时，垃圾抽屉是我唯一想要查看内容而没有真正好解释的地方。
像所有其他代码一样，总是尝试遵循周围代码的模式（除非它让你的眼睛流血）。
如果我错过了某些内容，请告诉我

Answer 2

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

class='...'

指定类的优点是您不依赖于特定的排序。每次想要重新排列视图时，必须更改后代标记会非常令人沮丧。指定类的另一个好处是，在使用CSS时，搜索特定的类名要比解密后代块容易得多。

据我所知，没有黑＆amp;每种方法都适用的白色指南。您可以自行决定在设计时考虑每个方面的好处/不足。

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选择相同元素有多种方法，而不仅仅是一种“正确”方式。通常不建议过于具体，但过于普遍的选择器也会导致问题。你必须找到一个平衡，你只能通过练习到达那里，没有食谱。

CSS类和后代选择器实践

3 个答案:

重置

布局

组件/功能

印刷术

主题

垃圾抽屉

结束笔记