33

这是一个很长的镜头，但是是否有可用的工具通过删除不需要的特异性来优化 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 开发人员带来潜在的好处：

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

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

相关问题、链接和工具：

CSS 特殊性的要点

查看 CSS 特性的工具

清理 CSS 的工具

按 CSS 特异性排序

Massive CSS 的 5 大错误

谷歌：高效的 CSS 选择器

处理器

干净的 CSS

CSS 整洁

4

4 回答 4

10

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

于 2012-08-08T14:44:00.680 回答
2

只是要把它扔出去——它不会“回答”你的问题，但它是我喜欢为那些做大量 css 编程的人宣传的工具：Firebug。

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

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

于 2012-08-16T16:23:58.223 回答
2

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

于 2012-08-16T14:38:04.783 回答
1

Actually there's a way you can do this using HTML5 and CSS3. The standard technique is to specify elements using the HTML 5 attribute "data-" and then do CSS selection for this attribute. This isn't the purpose of the attributes, but you can customly specify some elements that you can use to even switch the theme of a site.

So, for example, you can end up creating your specificity filters manually in CSS, by specifying

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

where data-specificity only matches to parents above.

UPDATE:

Alright, so for example, let's say you have a paragraph class, but you want to specify which parent, or how many parents the paragraph can inherit properties from. You would use rules for each potential parent that can be inherited from:

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

So these rules mean that any p tag which is a direct child of the div container and has specificity 2, is allowed to inherit properties from the div container. The blue color of the div gets inherited by the p with data-specificity 2.

Here's a JSFiddle where you can see this!

The idea is that like this, using HTML5, you can control exactly which elements are allowed to inherit which properties. It's a lot of extra code to write (for both child and parent elements) but you can use this to get rid of some unnecessary specificity

I've never actually seen anyone use this method in practice, I pretty much just cooked it up for you, but I think it could be very useful, what do you think ?

于 2012-08-16T21:26:12.597 回答