CSS选择器由浏览器引擎从右到左匹配.因此,他们首先找到孩子,然后检查他们的父母,看看他们是否符合规则的其余部分.
对我来说,最简单的方法是使用元素数量最少的选择器.首先是ID(因为它们应该只返回1个元素).然后可能是类或具有最少节点数的元素 - 例如,页面上可能只有一个跨度,因此可以使用引用跨度的任何规则直接到达该节点.
以下是备份我的说法的一些链接
这听起来像这样做是为了避免必须看到父母的所有孩子(可能是很多孩子),而不是一个孩子的所有父母必须是一个孩子.即使DOM很深,它也只会在每个级别查看一个节点而不是RTL匹配中的多个节点.评估CSS选择器LTR或RTL更容易/更快？
这是一个很长的镜头,但有没有一个工具可以通过删除不需要的特异性来优化CSS选择器？
我发现当我编写CSS时,我故意让我的选择器比必要的更具体,以避免冲突和准文档.
如果有一个工具可以分析给定的一组规则,确定它们与其他规则重叠的"唯一性",然后去除任何不必要的特异性,那将是很好的.
我甚至无法想象一个工具开发人员如何处理所需的所有场景,但我之前被其他人的聪明才智所震撼,并认为值得一提.
更新:
我已经为这个问题添加了一笔赏金,我越是想到它,我就越意识到CSS特异性过滤器的价值.
例如,在Sass和LESS中使用嵌套规则/选择器时,过度嵌套是一种常见且众所周知的反模式,很容易导致过度特定的选择器.
在优秀的TutsPlus课程中有一个很好的例子,可以使用Sass和Compass维护CSS:
body {
div.container {
p {
a {
color: purple;
}
}
}
}
Sass将遵循这些嵌套指令并生成以下CSS输出,不反对任何不需要的特性:
body div.container p a {
color: purple;
}
但是,如果特异性过滤器存在/确实存在,它将为CSS开发人员创造潜在的好处:
您可以将样式表组织为DOM的1:1映射,类似于在Firebug和Chrome开发工具中检查样式规则时所看到的内容.智能编辑器/ IDE可以使用共享样式/类自动填充DOM元素的样式.当然,这种冗余将由特异性过滤器/优化器过滤掉.
样式表可以通过扫描DOM并将其转换为CSS选择器/规则的工具预先填充其结构.这意味着开发人员只需要更新HTML; CSS"树"将保持同步以反映DOM的当前状态.智能编辑器可以让您跳转到元素/类的CSS定义以进行样式化 - 甚至可以在单独的面板中显示其样式规则.
在某种程度上,这几乎看起来是一个倒退 - 就像你在Dreamweaver或WebAssist中找到的功能,以帮助新手学习CSS.但是CSS选择器优化工具的基本思想似乎没什么好处,我所描述的工作流自动化类型将是合乎逻辑的下一步 - 催化剂将是特异性过滤器.
我研究了一些比较知名的CSS编辑器和Web IDE,但除了针对单个元素并为其生成选择器之外,还没有发现任何提供此类功能的东西.
更新2:CSS选择器性能
在回应Spliff的评论时,这里有两篇关于CSS选择器性能的精彩文章:
两人都认为微优化CSS不值得努力,但过度合格的后代选择器是"效率灾难".我还没有对自己进行基准测试,但怀疑我建议采用的那种"DOM Mapping"方法会在没有优化步骤的情况下导致性能下降,无论是手动还是自动化.
相关问题,链接和工具:
我已经将给定的CSS文件/字符串解析为JSON对象,如下所示:
{
"#header": {
"color": "#000000"
},
"#header h1": {
"color": "#000"
},
"h1": {
"color": "#4fb6e5"
}
}
我现在要做的是根据Specificty重新排序.在这种情况下,#header h1应该h1在JSON对象之后,因为这是它们在浏览器中的应用方式.
我怎样才能做到这一点？这有没有现有的库？或者任何有用的库来帮助解决这个问题？
我可以使用Javascript/jQuery或PHP来执行此操作.我正在寻找实施建议,希望这已经完成了!