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。我不确定最佳路线是什么，但如果可能的话，我想摆脱！重要。

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

因此建议修复的第二个因素，将 ID 替换为类。

可能发生的另一件事是，特定组件的一组规则被添加到覆盖样式表而不是组件。所以现在，规则也超越了其他组成部分。这里的解决方案是将违规样式重新定位到各自的组件。这可能会变得很快，所以最好早点做到这一点。

Answer 2

我唯一能想到的就是制作两个不同的课程，一个是红色，一个是蓝色。将html中的li对象设置为.red并在单击时更改类。但我不认为这是一个非常漂亮的解决方案。否则我认为你必须坚持你的！重要。

缺乏和特异性

2 个答案: