组件范围内的 CSS 选择器最佳实践 [关闭]

Posted 2023-02-23

【中文标题】组件范围内的 CSS 选择器最佳实践 [关闭]

【英文标题】：CSS selector best practices in component scope [closed]

【发布时间】：2017-07-26 11:23:17

【问题描述】：

基于组件的框架（如 Angular 2）限定与组件相关的 CSS。这意味着您的 component-css 不会干扰该组件之外的 dom 节点。

在这种情况下，由于选择器模糊导致的附带影响不再相关。我们是否仍应使用强制执行特定 CSS 选择器的规则，还是变得毫无意义？换一种说法，是否有任何正当理由继续使用特定的选择器？

我对性能的观点不是很感兴趣，而是对代码架构的观点感兴趣。

【问题讨论】：

究竟什么是“特定选择器”？

当它利用类和层次结构的组合来精确定位元素时，我将选择器定义为特定的。例如：li ... 的特定版本将是 .users > li.user ...。第一个将匹配我的 DOM 节点，但也可能匹配它不是为它编写的其他节点。第二个将降低这种风险。

这取决于你的组件模板的大小，但对于常见的情况你不应该需要它。

【参考方案1】：

Angular 组件应该小而专业，因此不再需要复杂的选择器。 通常简单的类选择器就足够了，因此为复杂的多级选择器使用指南是多余的。

您可能仍需要为跨组件边界的主题和选择器建立一些准则。

【讨论】：

感谢您的回答。您仍然在谈论简单的类，您认为在 DOM 元素上定义选择器可以吗？ （例如ul 或p）

当然，您也可以使用标签名称。几乎所有东西都是一个组件，标签名称通常非常独特。属性选择器也可以正常工作。你不应该需要复杂的选择器。