CSS 特异性过滤器

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 开发人员带来潜在的好处：

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

2. 样式表的结构可以由扫描 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 by Chris Coyier

两者都同意微优化 CSS 不值得努力，但过度限定的后代选择器是“效率灾难”。我自己还没有进行基准测试，但我怀疑我建议的那种“DOM 映射”方法会在没有手动或自动优化步骤的情况下导致性能下降。

相关问题、链接和工具：

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 编程的人宣传的工具：Firebug。强>

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

还有！ Firebug 现在几乎可用于所有浏览器。不仅仅是火狐。就个人而言，我偏爱在 Chrome 中使用它。

Answer 3

我们真的不能没有特异性，因为当您有两个或多个规则发生冲突时，它是唯一可以拯救您的方法。特殊性为整个混乱的 CSS 规则带来了理智，因此它更像是一种祝福而不是诅咒。你谈到的一些东西，比如 CSS 选择器，可以使用 Firefox/Firebug 来完成。我更担心浏览器的兼容性。

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;
}

因此这些规则意味着任何作为 div 容器的直接子级且具有特异性 2 的 p 标签都可以从 div 容器继承属性。 div 的蓝色被具有数据特异性 2 的 p 继承。

这是JSFiddle，您可以在其中看到这个！

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

我从来没有真正看到有人在实践中使用过这种方法，我几乎只是为你准备了它，但我认为它可能非常有用，你觉得呢？