CSS特异性过滤器

Question

有没有一款可以通过移除不必要的特异性来优化CSS选择器的工具？我发现当我编写CSS时，故意使选择器比必要的更具体，以避免冲突和“准文档”的目的。如果有一款工具能够分析一组给定规则，并确定它们在与其他规则重叠方面的“独特性”，然后去除任何不必要的特异性将会很好。我甚至无法想象开发人员如何处理所有这些情况，但我曾经被其他人在此领域的创意所震撼，所以觉得问问也无妨。

更新:

我在这个问题上添加了一个赏金，我越想越发现一个CSS特异性过滤器是多么有价值。例如，在Sass和LESS中使用嵌套规则/选择器时，过度嵌套是一个常见的且众所周知的反模式，很容易导致选择器过于具体。在TutsPlus的优秀课程Maintainable CSS with Sass and Compass中有一个很好的示例来说明这一点：

body {
    div.container {
        p {
            a {
                color: purple;
            }
        }
    }
}

Sass 将遵循这些嵌套指令，并生成以下的 CSS 输出，对任何不必要的特异性不提出异议：

Sass将按照这些嵌套指示进行操作，并生成相应的CSS输出，不会对任何不必要的特权产生异议。

body div.container p a {
    color: purple;
}

如果确实存在一个特异性过滤器，那么它将为CSS开发人员带来潜在的好处：

1. 您可以将样式表组织为DOM的一对一映射，类似于您在Firebug和Chrome Dev Tools中检查样式规则时看到的内容。智能编辑器/IDE可以自动填充具有共享样式/类的DOM元素的样式。当然，这种冗余将被特异性过滤器/优化器过滤掉。

2. 样式表的结构可以由扫描DOM并将其转换为CSS选择器/规则的工具预先填充。这意味着开发人员只需要更新HTML，CSS "树"将保持同步以反映DOM的当前状态。智能编辑器将让您跳转到元素/类的CSS定义以进行样式设置——甚至可以在单独的面板中显示其样式规则。

某种程度上，这似乎是向后退一步——就像您在Dreamweaver或WebAssist中找到的功能，可以帮助新手学习CSS。但是CSS选择器优化工具的基本思想似乎是个毋庸置疑的事实，我所描述的工作流自动化将是逻辑上的下一步，而催化剂将是特异性过滤器。

我调查了一些知名的CSS编辑器和Web IDE，但除了针对单个元素并为其生成选择器之外，没有找到任何提供此类型功能的东西。

更新2：CSS选择器性能

针对Spliff的评论，以下是两篇关于CSS选择器性能的好文章：

• CSS选择器性能影响，作者Steve Souders

• 高效地渲染CSS，作者Chris Coyier

两篇文章都认为微观优化CSS不值得付出努力，但是超限定的后代选择器是“效率灾难”。我还没有自己进行基准测试，但我怀疑我建议的“DOM映射”方法将在没有手动或自动化优化步骤的情况下导致性能损失。

相关问题、链接和工具：

CSS特异性中的点数

查看CSS特异性的工具

清理CSS的工具

按CSS特异性排序

大量CSS的五个常见错误

Google: 高效的CSS选择器

Procssor

清理CSS

CSS Tidy

- cantera

---

当然，这样的工具需要检查DOM或页面以基于其创建样式表并做出正确的观察和假设（例如，只有一个元素带有id =“pagehead”的header元素吗？aside元素只会出现在section.sidebar中吗？）。否则，将规则的优先级*降低而不改变其含义的唯一方法是删除重复的简单选择器（例如，section> div.foo.foo：nth-of-type（odd）变为section> div.foo：nth-of-type（odd））。 - BoltClock

@BoltClock：而且，如果遇到 ID，通常可以安全地消除它之前的任何内容。 html body div p#lorem span 通常可以缩短为 #lorem span。 - Madara's Ghost

说实话，除了遵循一些简单的规则（不要将元素添加到ID/类选择器中，不要在嵌套方面过度使用等），我认为不值得担心。现在，浏览器厂商正在对此进行优化。 - steveax

这就是为什么我一开始就不使用预处理器的原因... - BoltClock

@Truth，它也不一定适用于动态生成的HTML。在这种情况下，实际元素和嵌套可能取决于上下文，并且您可能只想在特定上下文（其周围的元素）中遇到该ID时应用样式。但问题本身也存在同样的问题。具有生成HTML的高度动态页面（无论是服务器端还是客户端）将使编写可靠工作的过滤器变得困难。 - Stefan

Answer 1

您可以尝试采用不同的方法，尽可能编写小型（低特异性）的选择器，并仅在需要时使其更具体。 以这种方式工作，您不需要工具。

- Mark

---

编写高效的CSS选择器 - Vladimir Starkov

我很感激您的回复，但整个想法是要避免这种方法——拥有一种工具，使我们能够编写CSS而不必考虑特定性。现在的工作方式是，我们必须跨多个规则样式化DOM元素——优化工具将允许我们在一个地方处理所有元素的样式。在我看来，这是一个更加合乎逻辑的工作流程；我们只是已经习惯了CSS不是这样工作的事实。 - cantera

CSS是一种“基于情况”的语言（取决于HTML），没有全能的CSS编码，否则每个人都可以进行CSS样式设计。特异性非常重要，如果有人不理解特异性，那么他/她肯定会写出糟糕的CSS。我从来没有感到需要使用工具。工具永远无法像你想要的那样输出代码（也就是所谓的心灵读取软件）。CSS（面向对象）是你必须掌握的东西，就像其他任何网络语言一样。 - Mark

Answer 2

我们真的无法没有特异性，因为当您有两个或更多规则冲突时，它是唯一能拯救您的东西。特异性使整个混乱的CSS规则变得清晰明了，所以它更像是一种福音而不是诅咒。您提到的一些内容，例如CSS选择器，可以使用Firefox / Firebug完成。我更担心的是浏览器兼容性。

- omoabobade

---

我的想法和我在帖子中提到的一样--如果你想确保你写的CSS很好，Firebug是一个很棒的工具。 - jos

你是否提前点击了提交？你的最后一句话不完整。 - BoltClock

Answer 3

我想提供一个工具，虽然它不能“回答”你的问题，但对于经常进行CSS编程的人来说，这是一个我喜欢推广的工具：Firebug。

如果你不熟悉它，它是一个用于Web浏览器的工具。安装后，打开你的页面，右键单击并选择“检查元素”。它将显示影响页面上不同元素的所有CSS，并有助于创建干净、精确的CSS代码。此外，它使得更容易看到通过轻微修改后页面的即时更新。它会告诉你被其他CSS代码覆盖的无用CSS代码。

另外！Firebug现在可用于几乎所有浏览器。不仅仅是Firefox。个人而言，我喜欢在Chrome中使用它。

- jos

---

谢谢，我同意Firefox是一个很棒的工具。 - cantera

Answer 4

实际上，您可以使用HTML5和CSS3来完成此操作。标准技术是使用HTML 5属性{{link1：“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;
}

因此，这些规则意味着任何直接作为 div 容器子元素的具有特异性 2 的 p 标签都可以从 div 容器继承属性。p 元素的 data-specificity 2 继承了 div 元素的蓝色。

在这里，您可以查看 JSFiddle！

使用 HTML5，您可以精确控制哪些元素允许继承哪些属性。这需要编写大量额外的代码（对于子元素和父元素），但是您可以使用它来消除一些不必要的特异性。

我实际上从未见过有人在实践中使用这种方法，我几乎只是为您想出了这个方法，但我认为它可能非常有用，您觉得呢？

- Cosmin Atanasiu

---

这是一个有趣的方法，感谢您的回复。不幸的是，所需的非语义标记数量对我来说是一个致命问题，但毫无疑问，这是一个非常有创意的解决方案。 - cantera

好的，接下来几个小时内我无法提供一个好的答案，但如果你能以某种方式延长悬赏日期，我会发布一个非常干净的解决方案和示例代码 ;) - Cosmin Atanasiu

当然可以，我很乐意重新设置悬赏（假设允许这样做）。我会在这里添加一条评论，这样它就会出现在您的收件箱中。 - cantera

抱歉，我更新了我的答案。当我写下这个答案时，我有其他的想法。我已经相应地编辑了答案。 - Cosmin Atanasiu