Question

我只是想为子div添加样式。我这样做了，它正在工作。

.summary_boxes {
  .header {
    text-align: center;
  }
  .description {
    text-align: center;
  }
}

但是我的标题类和描述类位于另一个名为content的div内部。

我还应该提这个班吗？像这样

.summary_boxes > content {
  .header {
    text-align: center;
  }
  .description {
    text-align: center;
  }
}

哪种格式正确？

Answer 1

答案并不简单。这取决于您希望如何扩展CSS。第一件事是第一件事。 CSS从右到左解析，而不是从左到右解析。许多人认为这样的事情：

.container > .left-col .column-heading > div > .final_thing_to_style {
  // styles
}

比这更快：

.final_thing_to_style {
 // styles
}

第二个版本效率更高，因为CSS是从右到左解析的。立即找到类final_thing_to_style，并完成解析器。

让我们来看看你的CSS。

.summary_boxes > content {
  .header {
    text-align: center;
  }
  .description {
    text-align: center;
  }
}

虽然添加直接子项会使您的CSS更具体，但它不是必需的，应该省略。但问问自己，您将如何使用.header和.description。如果这是您使用这些课程的唯一地方，请考虑以下内容：

.summary_box_header,
.summary_box_description {
  text-align: center;
}

如果您在网页的不同区域需要不同风格的.header和.description，这个建议会使您的风格过于紧密。你最终会有很多重复。

稍微松开耦合，你可以尝试这样的事情：

.header {
  .summary_boxes & {
    text-align: center;
  }

  .another_context & {
    text-align: left;
  }

  .yet_another_context & {
    text-align: right;
  }
}

这将创建以下CSS：

.summary_boxes .header {
  text-align: center;
}

.another_context .header {
  text-align: left;
}

.yet_another_context .header {
  text-align: right;
}

使用父选择器&，我们可以为.header类创建非常易读的上下文。我们确实增加了一些特异性，但获得了可读性和灵活性。

通过一些实验，您将能够为您的风格创建合适，灵活的模式。

Answer 2

这一切都归结为特异性（https://css-tricks.com/specifics-on-css-specificity/）。规则是尽量保持特异性水平尽可能低，而不要让你的css规则在其预定的使用区域之外流血。

低特异性增加了许多好处，一个是可重用性，简单性和更轻的文件。但是，如果你的特异性太低，你的规则就会开始出血并相互干扰。

这里没有对错，这一切都归结为预期的用例和未来的代码校对。如果没有关于如何在将来使用这些类的HTML代码和一些背景信息，就没有办法说明你应该或不应该在特异性方面做什么。

Andy的回答有一些例子，但当然对你的代码构建（或将来重组）的所有不同方式都没有限制。

sass子元素顺序？

2 个答案: