上课！重要

Question

在Less中有没有一种简单的方法可以使类中的所有属性

!important

？我的用例是，我将动态地将“标签”(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

这是对@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"

不会是红色的，甚至不会是绿色的。

我做的事情

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

我不使用

!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 和名称间距的内容会比我在这篇文章中告诉你更多。

2023年更新

在 2023 年，还有许多其他编写 CSS 的方法。

大多数大型框架（React、Angular、Vue 等）都有推荐的方法，但您也可以使用许多 CSS 框架之一。

• 顺风 CSS
• 基金会,
• 布尔玛
• UiKit
• Pure.css
• 快子
• 物质化 CSS
• 毫克

一些简单的阅读

这里有几个链接更多地讨论了特异性、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;
}