CSS特异性过滤器

前端之家收集整理的这篇文章主要介绍了CSS特异性过滤器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这是一个长镜头,但有没有可用的工具,通过删除不必要的特异性来优化CSS选择器?

我发现当我写CSS,我故意使我的选择器比必要的更具体,以避免冲突和准文档。

如果有一个工具可以分析一组给定的规则,在与其他规则的重叠方面确定它们的“唯一性”,然后消除任何不必要的特殊性,这将是巨大的。

我甚至不能想象工具开发者将如何处理所有这些需要的情况,但我已经被其他人在这一领域的巧妙之处吹走了,并认为这是值得问。

更新:

我已经为这个问题添加了一个赏金,而且我想到的越多,我越认识到CSS特异性过滤器是多么有价值。

例如,当在SassLESS中使用嵌套规则/选择器时,过多的嵌套是一个commonwell-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帮助newbs学习CSS。但是CSS选择器优化工具的基本想法似乎没有什么意义,我描述的工作流自动化类型将是下一步的逻辑 – 催化剂将是特异性过滤器。

我研究了一些更知名的CSS编辑器和Web IDE,但没有找到任何提供这种类型的功能,除了定位一个单一的元素,并为它生成一个选择器。

更新2:CSS选择器性能

为了回应Spliff的评论,这里有两篇关于CSS选择器性能的伟大文章

> Performance Impact of CSS Selectors由Steve Souders
> Efficiently Rendering CSS作者: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

解决方法

您可以尝试采取不同的方法,尽量将选择器写作尽可能小(低特异性)。并只在需要时使它们更具体。 有了这种工作方式,你不需要一个工具。
原文链接:https://www.f2er.com/css/221296.html

猜你在找的CSS相关文章