Html CSS选择器优化

我在寻找优化css性能的方法，并想知道他们是否是一个现有的工具，可以将复杂的选择器转换为更简单的选择器

该工具将查看所有css规则，并创建包含所有正确属性的唯一单路径选择器。它将查看每个dom节点并搜索任何css匹配，如果找到了什么，它将向节点添加简化的选择器。呈现的css只包含简化版本，html仍将具有原始类/ID，因此现有设置不会中断

我的意思是一个夸张的例子：

#原件{
填充物：5px；
背景：蓝色；
}
#原始导航{
字体大小：24px；
}
#原始导航ul{
背景：黑色；
}
#原稿：nav ul li{
列表样式类型：无；
}
#原件：nav ul li a{
文字装饰：无；
颜色：绿色；
}
#简化{
填充物：5px；
背景：蓝色；
}
第1课{
字体大小：24px；
}
第2课{
背景：黑色；
}
第3课{
列表样式类型：无；
}
第四章{
文字装饰：无；
颜色：绿色；
}

原始CSS








简化CSS

我会避免您在示例中所做的操作。你的选择器不应该太罗嗦，但对他们来说，有一定程度的描述也很好，这样你就知道他们的目的是什么了

您可能希望阅读和其他CSS方法，这些方法有助于组织和加快CSS的编写

你也可能在寻找类似的东西或另一个吞咽/咕噜的任务。CSSO有一个您明确想要的特性，解析您的标记并从CSS中删除无用的选择器。请注意，如果在某些JS脚本中有DOM修饰符，您可能会遇到CSSO从CSS中删除这些选择器的问题，因为在任务运行时，它们不存在于标记中

---

这是一篇关于CSS优化其他方法的好文章。

您研究过Rails标准SCS吗？是的，但是SCS不只是一个呈现为普通CSS的预处理器，它不一定会优化它吗？这是真的。。。我以为你的目标是减少选择器的长度以便于阅读。我现在知道你在看表演了。。我误解了你的问题。我的错，我没有真正弄清楚我在找什么。现在我将编辑这个问题。我发现这很有趣：这不是一个可以使用的工具，而是一些关于浏览器如何使用css的信息。总的来说，我同意

部分，如果你在你的网站上没有看到太多的渲染缓慢，那么不要担心，只是要为将来着想。

另外：请记住，有时候有一个css行，比如

#menu>ul>li

更容易阅读和理解，而不需要在html中找到该类（这意味着你或其他在网站上工作的人将来更容易更新）。很有趣，以前从未听说过CSSO，谢谢链接！