CSS：选择深度嵌套元素的最佳实践

我经常需要在页面的某些特定部分中处理通用元素。我发现，就任何规则的影响而言，这种方法最容易理解：

.shop > .products > .product > .description > .warning {
   color: red;
 }

但我经常看到：

.shopProductsProductDesc > .warning {
     color: red;
}

---

采取哪种方法真的重要吗？

这取决于你试图解决的问题

据我所知，选择器.shop>.products>.product>.description>警告将用于两种情况：

您有多个警告元素，但您只想选择描述中的元素，还有其他选择器用于警告您不想覆盖的内容。 您需要覆盖以前不太具体的选择器。Ex..shop>.products>.product>.description.警告 另一个选择器.shopProductsProductDesc>.warning的具体性不如第一个选择器.shopProductsProductDesc>.warning，但假设.warning的容器具有这两个类。description.shopProductsProductDesc，则结果将与第一个相同

CSS完全是关于特定性的，如果您的选择器比上一个使用的选择器更为特定，则属性将发生变化。这就是为什么在使用特定选择器时必须小心的原因，因为更改属性的最后一个选项是使用！重要的

---

我希望这有助于澄清问题。

在尝试了几种不同的风格后，我认为如果你有合作者，个人偏好或设定标准才是真正的方向。我更喜欢第二个版本，但第一个版本也很清晰

<> P>如果你考虑浏览器在引擎盖下渲染CSS样式的效率，例如，它通常是最终的赢家，因为它对于浏览器来说是最轻的。我对一些布局/公共元素使用边界元法

在现实生活中，除非你做了一些严重错误的事情，否则现代浏览器和设备使得CSS解析和呈现的差异可以忽略不计。但这是如果你把每件事都编码好的话

---

我曾经使用过意大利面CSS代码库，它可能需要几分钟来渲染所有SCS。这是一个巨大的代码库，但有几个文件是巨大的瓶颈。

根据我自己的经验，第二个选项通常是最好的，不是因为直接的技术原因，它将执行相同的操作，而是为了UX一致性和代码维护

第一个选项产生一个沉重的选择器，这将更难覆盖。它可能是需要的，但它通常是一个整体混乱的CSS的标志，因为如果一切都是过度约束的，那么它就不太容易重用/扩展

根据我对CSS和前端可重用组件的理解，您总是只需要两个级别

警告组件的样式无大小、无边距、大小取决于显示位置，边距为位置，此处仅为内部设计：

.warning {
   //Your design here
   font-size: 1.5rem;
   font-weight: bold;
   color: orange;
}

以及容器内的定位和变型：

.container > .warning {
   //This is an example.
   position: absolute;
   right: 0;
   border: solid 1px red;
}

长的CSS选择器会使事情变得更复杂，你的队友很难理解，也很难覆盖，因为你可能需要更长的CSS选择器，而且永远不会结束。另外，最后你会得到一个更重的包裹

---

如果你想要一个高效的用户体验，用户界面不应该在任何地方都有那么大的不同，所以你不需要有那么多相同组件的变体。否则，您可能需要多个不同的组件，但您肯定想要一个简单高效的用户体验，而这通常不需要太多的视觉概念，因此您必须避免大量的变体。

这很重要，因为它具有特殊性。第一个样式规则将始终覆盖第二个，无论它们都出现在样式表中的什么位置，因为它更具体，基本上它有更多的类选择器

也就是说，从可维护性的角度来看，第一条规则是一场噩梦，原因有很多：

这使得代码难以阅读和理解 正如我们所看到的，它更难超越。 如果更改HTML的结构，它将中断 只有准确地镜像HTML的结构，才能重用它。 从性能的角度来看，这也很糟糕。当浏览器将一个元素与一个样式规则相匹配时，他们会从右到左读取每个选择器，并一直读取，直到找到匹配项或排除该规则为止。因此，选择器越简单，确定匹配的速度就越快。如果选择器仅包含一个类名，则浏览器可以比必须在DOM树中向上搜索时更快地将元素与样式规则匹配

第二条规则更好，但最佳规则如下：

.shopProductsProductDesc--warning {
  color: red;
}

这解决了上述所有问题，而且时间足够长，其他地方不太可能出现名称冲突，尽管显然并非不可能

---

一般来说，在CSS中嵌套选择器是不好的做法，在我看来，最好的CSS方法是那些有办法避免这种情况的方法，例如BEM、JS中的CSS。

警告不应该是您的类选择器吗

---

你的职位？这是一个时刻的标记选择器两种解决方案都是有效的，第一种方案比另一种更为具体：第二种方案将匹配任何作为shopProductsProductDec的后代的警告元素，而第一种方案需要非常具体的dom配置，如果您在一个可以创建范围的框架之外工作，这是最佳实践，据我所知，如果使用特定类而不遵循长路径，即使是.shopProductsProductDescWarning{}，样式表也会更短，更易于阅读和理解