创建类！重要

Question

在Less中，有没有一种简单的方法来让一个类中的所有属性都成为!important？我的用例是，我将动态地将一个'tag‘(div)插入到现有的div中，该div将始终具有内联样式。

示例：

 <div class="text-widget ui-sortable" style="font-size: 5em;>
    <div class="tag"><span>Click me to drag widget. My font size should never change</span></div>
    <p>I am a text widget that can be dragged. When I am deselected my tag above will be deleted</p>
 </div>

因此.tag属性需要为!important，以避免获取文本小部件css。在less中有没有一种简单的方法可以让所有的属性都成为!important？就像..。

 .tag !important {
     .... lots of properties that I dont want to add !important to each one.
 }

Answer 1

这是对@sazr对我评论的问题的回复。

如果你认为你需要使用!important，那么你的CSS是非常复杂的，并且经常有太多的顶层规则影响太多的事情。有时这是因为您试图创建在整个页面中应用的通用CSS，有时是因为您正在创建的规则具有如此大的特定值，以至于您找不到另一种方法来将您想要的样式强制应用于元素。

对于CSS开发人员来说，了解什么是专用性以及它是如何工作的是最重要的。如果您没有真正理解这一点，那么您注定需要!important来解决您无法解决的问题。

看看我从这里拿到的这个图表：http://www.standardista.com/css3/css-specificity/

​

​

请注意与!important关联的图像。这是核选项，应该作为最后的手段使用。尽管我在每条规则上都使用它，这样@media print就不必担心我的打印输出了。

在CSS中使用某种名称间隔将有助于减少由太多非特定选择器或太多特定选择器造成的死亡螺旋，这些选择器太具体，以至于您不能再覆盖这些规则。

如下所示的select：

#page1 .outershell .innershell .form button {
  background-color: green;
}

具有1,3,1的特异性

如果你有这样的布局：

<div id="page1">
  <div class="outershell">
    <div class="innershell">
      <form class="form">
        <button>Click me</button>
      </form>
    </div>
  </div>
</div>

如果您想要将按钮的背景颜色更改为红色，则必须创建一个具有更高特异性的新选择器。

这不管用

.form button {
  background-color: red;
}

因为它只有0,1,1的特异性

#page1 .form button {
  background-color: red;
}

它的值仅为1,1,1

因此您需要使用两个ID选择器，第四个类选择器或第二个元素选择器。或者，您可以将完全相同的选择器放在第一个按钮之后，然后该声明之后的所有按钮都将是红色的。

但这不会将任何其他按钮更改为红色。因此，使用此布局：

<div id="page1">
  <div class="outershell">
    <div class="innershell">
      <form class="form">
        <button>Click me</button>
      </form>
    </div>
    <div class="secondshell">
      <button>Not me</button>
    </div>
  </div>
</div>

按钮"Not me"将不是红色的，甚至不是绿色的。

我做的事情

我从来没有使用ID选择器，除非我必须覆盖现有的CSS。

除了@media print之外，我不使用!important，我将它用于打印输出中的所有内容。这样，我就知道了打印输出的特殊性，而不用担心其他CSS选择器会破坏我的打印输出。

我避免使用深度选择器。我的大多数选择器都有0,1,0到0,2,0或0,1,2的特异值

我使用状态值的属性和属性选择器来减少我需要编写的JS的数量，让CSS为我做这项工作。

BEM拯救了我们

好的。有些人不喜欢BEM。但是它从复杂的CSS中拯救了我的生命。自从我开始使用它以来，我没有遇到过任何CSS特异性问题，除了处理较旧的CSS时，即使这样我也发现它很容易修复。

BEM不仅仅与CSS有关，它还与以一种合理的方式格式化DOM有关，以帮助CSS为您工作，而不是让您为它工作。

使用此DOM：

<style>
.form-box--btn {
  background-color: red;
}
</style>
<div>
  <div>
    <div class="form-box">
      <form class="form-box--form">
        <button class="form-box--btn">Click me</button>
      </form>
    </div>
    <div class="other-thing">
      <button class="form-box--btn">Me too</button>
    </div>
  </div>
</div>

I我知道我的两个按钮是红色的。只要在这个页面上工作的每个人都同意遵守规则，我们就不会遇到按钮改变颜色的问题。

我知道这是一个简单的例子，但阅读更多关于特异性、BEM和名称间距的内容将比我在这篇文章中告诉你的要多得多。

一些轻松的阅读

以下是一些更多关于专用性、BEM和名称间距的链接：

• https://uxengineer.com/css-specificity-avoid-important-css/
• http://getbem.com/
• https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
• https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
• https://zellwk.com/blog/css-architecture-1/

Answer 2

为它创建一个类：

.tagStyle (@bg: #00FF00) {
  background: @bg;
  /* Other properties */
}
.tag {
  .tagStyle() !important;
}