为什么 CSS 框架不必要地使用 !important 标签？

Question

与其说这是一个问题，不如说这是一场辩论，但我觉得互联网上没有太多内容涉及这个话题。

例如，foundation 附带了数百个 !important 标签，这些标签在我看来并不需要它们：

.text-center { text-align: center !important; }

有很多 css 与此类似，在我看来这是不好的做法，我想回答的问题是 css 框架为什么要使用它们？ Bootstrap 和 Foundation 是两个主要的 css 框架，它们都使用它们。

我一直被告知在 css 中使用重要标签是非常糟糕的做法，应该只用于 IE。

Answer 1

是因为你的代码中可以有st。像这样：

<style>
#aside p {text-align: right;}
.text-center {text-align: center} /* without important text will be aligned to right */
</style>

<div id="aside">
    <p>right-aligned text</p>
    <p class="text-center">centered text</p>
</div>

http://jsfiddle.net/v1v4jaas/

在这种情况下，没有什么重要的，文本将右对齐。有了important，第二段就会居中。

Class 相对于 id 等只有低优先级

Answer 2

如果您自己编写 CSS，您可以在需要时自由添加更具体的规则：

.center        { text-align: center; }
.foobar        { text-align: left; }
.foobar.center { text-align: center; }

但是，CSS 框架无法预测您将如何安排 HTML。所以做 !important 而不是生成数千个更具体规则的组合更容易。示例：

.center               { text-align: center; }
.foobar               { text-align: left; }
.barbaz               { text-align: right; }
 /*
  * assuming .center must be centered regardless of other rules and
  * !important must be avoided at the same time, we need to do this
  */
.foobar.center        { text-align: center; }
.barbaz.center        { text-align: center; }
.foobar.barbaz.center { text-align: center; }

Answer 3

Using !important in your CSS usually means, the classes you have written do not have a proper hierarchy.

!important 规则覆盖特定的属性。但只能在无可奈何不得不推翻的时候使用。

最佳做法是仅在实用程序 class 中单独使用 !important。

例如假设您有一个按钮，您希望它在整个应用程序中看起来相似

 .btn {
       margin-bottom: 0;  
       text-align: center;
       vertical-align: middle;
       touch-action: manipulation;
       cursor: pointer;  
       border: 1px solid transparent;
       padding: 6px 12px;
       font-size: 11px;
       border-radius: 4px;  
    }

上述 .btn 的定义是正确的，除非它没有被任何其他 class 包装，这可能会覆盖我们期望在整个应用程序中相同的 .btn 格式。但是一旦像下面这样被其他class包裹起来，最终的风格就和你想象的完全不一样了。

<p class="format-paragraph">
   <button type="submit" name="save" class="btn"> Submit</button> 
</p>

现在，为了使您的 .btn class 超级强大并受到包装它的人的尊重，请将 .btn 定义更改为：

.btn {
           margin-bottom: 0              !important;  
           text-align: center            !important;
           vertical-align: middle        !important;
           touch-action: manipulation    !important;
           cursor: pointer               !important;  
           border: 1px solid transparent !important;
           padding: 6px 12px             !important;
           font-size: 11px               !important;
           border-radius: 4px            !important;  
        }

此定义足以使您的按钮在整个应用程序中看起来相似。

问题中提到的.text-center { text-align: center !important; }class在这里只是一个实用工具

了解有关 !important 优先级的更多信息 here。

为什么 CSS 框架不必要地使用 !important 标签？

Why do CSS Frameworks use !important tags unnecessarily?

css

css-frameworks

twitter-bootstrap

zurb-foundation

cascade-framework