css - LESS 和特异性

Question

我正在尝试使用 LESS 更好地组织和构造我们的应用程序，我想知道使用“!important”完成任务的最佳途径。目前我们有很多这样的东西，如果有意义的话，我想摆脱它们。我的例子是:

<div id="test">
  <ul>
    <li>One</li>
    <li>Two</li>
  </ul>
</div>
<button id="button">
Select
</button>

$('#button').on('click', function(){
  $('#test li').toggleClass('blue');
})

选项 1:

#test {
  ul{
      li{
        color: red;
      }
      .blue{
        color: blue;
      }
  }
}

所以对于 LESS，如果我在初始颜色之后有类，它应该接管。如果我想添加蓝色类，那么我会将其插入 LESS 文件中的每个区域，或者执行以下操作:

选项 2:

#test {
  ul{
      li{
        color: red;
      } 
  }
}

.blue{
  color: blue !important;
}

在这种情况下，我会将其列出一次，然后无论何时调用它都会覆盖该类。如果有人认为有比这两个更好的东西，或者有一个选项 3。我不确定最好的路线是什么，但我想尽可能摆脱 !important。

Answer 1

我同意这样的观点，即在重构样式时，您应该只使用 !important 作为临时修复。显然你有一个特殊的问题需要解决(你的例子并没有完全证明)。在您的示例中，我会首先执行选项 #2(如果它很难计算)，然后将 .blue 之类的重写重构为最后加载的样式。

https://jsbin.com/cekobodixe/edit?html,css,js,output

如果我们稍微改变它，我们会遇到一个常见问题:id 的使用不允许加载顺序的级联优先级:

https://jsbin.com/xikolenevo/1/edit?html,css,js,output

因此这表明修复的第二个因素，将 ids 替换为 classes。

可能发生的另一件事是，特定组件的一组规则被添加到覆盖样式表而不是组件。所以现在，规则也覆盖了其他组件。这里的解决方案是将有问题的样式重新定位到它们各自的组件。这可能会很快变得丑陋，因此最好尽早进行。