我发现当我写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帮助newbs学习CSS。但是CSS选择器优化工具的基本想法似乎没有什么意义,我描述的工作流自动化类型将是下一步的逻辑 – 催化剂将是特异性过滤器。
我研究了一些更知名的CSS编辑器和Web IDE,但没有找到任何提供这种类型的功能,除了定位一个单一的元素,并为它生成一个选择器。
更新2:CSS选择器性能
为了回应Spliff的评论,这里有两篇关于CSS选择器性能的伟大文章:
> Performance Impact of CSS Selectors由Steve Souders
> Efficiently Rendering CSS作者:Chris Coyier
两者都同意微优化CSS不值得的努力,但是过度合格的后代选择器是“效率灾难”。我还没有自己进行基准测试,但怀疑,我建议的那种“DOM映射”方法将导致性能命中没有优化步骤,手动或自动。
相关问题,链接和工具: