Question

这是一个很长的镜头，但有没有可用的工具通过删除不需要的特异性来优化CSS选择器？

我发现当我编写CSS时，我故意让我的选择器更具体，以避免冲突和准文档。

如果有一个工具可以分析一组给定的规则，确定它们与其他规则重叠的“唯一性”，然后去除任何不必要的特殊性，那将是很好的。

我甚至无法想象工具开发人员如何处理所需的所有场景，但我之前已经被其他人在这方面的独创性所震撼，并认为值得一提。

更新

我已经为这个问题添加了一笔赏金，而且我想的越多，我就越意识到 CSS特异性过滤器的价值。

例如，在Sass和LESS中使用嵌套规则/选择器时，过度嵌套是common和well-known反模式很容易导致选择过度的选择。

在优秀的TutsPlus课程Maintainable CSS with Sass and Compass中有一个很好的例证：

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选择器性能的精彩文章：

Performance Impact of CSS Selectors
Efficiently Rendering CSS

双方都认为微优化CSS不值得努力，但过度合格的后代选择器是“效率灾难”。我还没有对自己进行基准测试，但怀疑我建议使用的那种“DOM Mapping”方法会在没有优化步骤的情况下导致性能下降，无论是手动还是自动化。

相关问题，链接和工具：

Points in CSS Specificity

Tool to See CSS Specificity

Tool for Cleaning Up CSS

Order by CSS Specificity

Top 5 Mistakes of Massive CSS

Google: Efficient CSS Selectors

Procssor

Clean CSS

CSS Tidy

Answer 1

您可以尝试采用不同的方法，尽量将您的选择器编写为小（低特异性）。并且只在需要时使它们更具体。通过这种工作方式，您不需要工具。

Answer 2

我们真的离不开特异性，因为当你有两个或更多规则发生碰撞时，它是唯一可以拯救你的东西。特异性为整个混乱的CSS规则带来了理智，因此它更多的是一种祝福而不是诅咒。您谈到的一些内容，如CSS选择器，可以使用Firefox / Firebug完成。我对浏览器兼容性感到不安。

Answer 3

只是把它扔出去 - 它没有'回答'你的问题，但它是我喜欢为那些做很多css编程的人传播的工具： Firebug。

如果您不熟悉它，它是一个用于Web浏览器的工具。安装完毕后，将页面拉出，右键单击并选择“检查元素”。它将向您显示影响页面上不同元素的所有css，并且对于创建干净，精确的css代码非常有用。此外，通过略微修改，您可以更轻松地查看页面外观的即时更新。 它将通知您被其他css代码覆盖的无用css代码。

也！ Firebug现在几乎适用于所有浏览器。不只是Firefox。就个人而言，我偏爱在Chrome中使用它。

Answer 4

实际上有一种方法可以使用HTML5和CSS3来实现。标准技术是使用HTML 5属性"data-"指定元素，然后为此属性执行CSS选择。这不是属性的目的，但您可以自定义指定一些元素，甚至可以用来切换网站的主题。

因此，例如，您最终可以通过指定

在CSS中手动创建特异性过滤器

<b data-specificity=2>test</b>

其中数据特异性仅与上述父母匹配。

<强>更新

好的，例如，假设您有一个段落类，但是您想要指定段落可以从哪个父项或者多少父项继承属性。您可以为可以继承的每个潜在父级使用规则：

p[data-specificity="1"]{
    color:red;
    font-family:verdana;
    text-decoration:underline;
}
p[data-specificity="2"]{
    color:black;
    font-family:arial;
}
div.container > *[data-specificity="2"] {
    font-family:impact;
    color:blue;
    text-decoration:underline;
}

因此，这些规则意味着任何p标签都是div容器的直接子节点并具有特异性2，允许从div容器继承属性。 div的蓝色由p继承，具有数据特异性2。

这是JSFiddle，你可以看到这个！

这样的想法是，使用HTML5，您可以准确地控制允许哪些元素继承哪些属性。这是很多额外的代码（对于子元素和父元素），但你可以用它来摆脱一些不必要的特殊性

我从来没有真正见过有人在练习中使用过这种方法，我几乎只是为你准备好了，但我认为这可能非常有用，您怎么看？

CSS特异性过滤器

4 个答案: