Question

在Less中，有没有一种简单的方法可以将所有属性设置在类!important中？我的用例是，我将在现有的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。有没有一种简单的方法可以使所有属性都!important？像...

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

Answer 1

为此上课：

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

Answer 2

这是对@sazr对我的评论的提问的答复。

如果您认为需要使用!important，那么您的CSS非常复杂，并且通常有太多影响许多事物的顶级规则。有时是因为您试图创建适用于整个页面的通用CSS，有时是因为您创建的规则具有很高的特异性，以致于您无法找到另一种方法来强制您想要的样式您的元素。

了解什么是特异性及其如何工作对于CSS开发人员来说是最重要的事情。如果您不真正了解这一点，那么您注定需要!important解决无法解决的问题。

看看我从这里获得的这张图表：http://www.standardista.com/css3/css-specificity/

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

在CSS中使用某种名称间隔将有助于减少由过多的非特定选择器或过多的特定选择器而导致的死亡螺旋。

这样的选择：

#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"不会是红色，甚至不会是绿色。

我要做的事

除非使用必须覆盖现有CSS，否则我不会使用ID选择器。

除!important外，我不使用@media print，而是将其用于打印输出中的所有内容。这样，我就知道我对打印输出的特殊性，而不必担心其他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>

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

我知道这是一个简单的例子，但是阅读有关特异性，BEM和名称间隔的更多信息，将比我在这篇文章中所能了解的更多。

一些光线读数

这里有一些链接专门讨论了特异性，BEM和名称间隔：

让课堂变得重要！

2 个答案:

我要做的事

BEM进行救援

一些光线读数