CSS选择器优化

Question

我正在寻找优化css性能的方法，我想知道他们的工具是不是可以将复杂的选择器转换为更简单的选择器。

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

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

​

#original {
  padding: 5px;
  background: blue;
}
#original .nav {
  font-size: 24px;
}
#original .nav ul {
  background: black;
}
#original .nav ul li {
  list-style-type: none;
}
#original .nav ul li a {
  text-decoration: none;
  color: green;
}

#simplified {
  padding: 5px;
  background: blue;
}
._ranClass1 {
  font-size: 24px;
}
._ranClass2 {
  background: black;
}
._ranClass3 {
  list-style-type: none;
}
._ranClass4 {
  text-decoration: none;
  color: green;
}

<div id="original">
  <h1>Original CSS</h1>
  <div class="nav">
    <ul class="_ranClass2">
      <li><a href="/">Link 1</a>
      </li>
      <li><a href="/">Link 1</a>
      </li>
      <li><a href="/">Link 1</a>
      </li>
    </ul>
  </div>
</div>

<div id="simplified">
  <h1>Simplified CSS</h1>
  <div class="nav _ranClass1">
    <ul class="_ranClass2">
      <li class="_ranClass3"><a href="/" class="_ranClass4">Link 1</a>
      </li>
      <li class="_ranClass3"><a href="/" class="_ranClass4">Link 1</a>
      </li>
      <li class="_ranClass3"><a href="/" class="_ranClass4">Link 1</a>
      </li>
    </ul>
  </div>
</div>

​

当然，这将需要大量的调整，可能会造成更多的头疼而不是好处，但我想知道是否存在这样的东西。

编辑：

我不是在寻找一种编写更方便的CSS的方法，SASS/SCSS的存在就是出于这个原因。我正在寻找一种方法来优化CSS在浏览器方面。例如:取原始选择器

#original .nav ul li a {
  text-decoration: none;
  color: green;
}

也简化了

._ranClass4 {
  text-decoration: none;
  color: green;
}

浏览器不会先查看每个'a‘节点，然后检查父节点是否匹配，如果节点有._ranClass4类，它就会进行匹配

Answer 1

我会避免您在示例中所做的事情。你的选择器不应该太冗长，但对它们有一定程度的描述也很好，这样你就知道它们的预期目的是什么。

您可能希望阅读BEM和其他CSS方法，它们可以帮助组织和加快CSS的编写。

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

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