CSS特异性过滤器

Question

这是一个很长的镜头,但有没有一个工具可以通过删除不需要的特异性来优化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选择器性能的精彩文章: