CSS类和后代选择器实践

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

通过右脚结账开始对话什么是一个好的CSS策略？.就个人而言,我认为@ gregnostic的策略应该重命名为域名.

我认为,每个拥有超过十几个网页的项目确实需要根据其范围在一定程度上实现各个领域.

这里的域名(按特异性排序):

重置

尝试在浏览器和环境条件下实现基线.由Eric Meyer着名.许多人跳过这个作为一个已解决的问题,但作为一个在页面内容管理系统上工作的人,相信我重置CSS很重要,并且可以成为一个具有挑战性的问题,优雅地解决(特别是如果客户端使用相同的你是主题库).

这些选择器应尽可能通用.基于CSS类的拣选通常没有任何意义,有时,当您需要在给定的shell内重置时.

布局

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

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

.row .col {
    width: 100%;
}

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

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

• 960 网格系统
• Twitter Bootstrap
• Columnal
• 很多人.

组件/功能

我倾向于对这些非常具体.我最喜欢的模式之一是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为.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;
}

根据客户端的需要,我甚至可以在按钮内添加跨度规则.

主题

就像Typography领域一样,我更倾向于在这个领域进行标签选择.主题几乎是定义扔掉(因为例如,塔可钟和麦当劳不希望有相同的主题).

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

垃圾抽屉

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

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

div div {
    white-space: nowrap;
}

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

结束笔记

• 当我在其中进行具有CSS的代码评论时,Junk抽屉是我唯一想要查看id的地方而没有很好的解释.
• 像所有其他代码一样,总是尝试遵循周围代码的模式(除非它让你的眼睛流血).
• 如果我错过了什么,请告诉我

Answer 2

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

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

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

据我所知,就每种情况而言,没有黑白指南.您可以自行决定在设计时考虑每个的好处/不足.