Question

这更像是一场辩论而不是一个问题，但我觉得互联网上并没有很多内容涉及这个话题。

例如，基础上有数百个重要的标签，用于我眼中不需要的东西：

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

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

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

Answer 1

如果您编写自己的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 2

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

<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/

在没有重要内容的情况下，文本将向右对齐。重要的是，第二段将集中。

Class对id等只有低优先级。

Answer 3

在CSS中使用!important通常意味着，您编写的类具有此功能没有适当的等级制度。

!important规则会覆盖特定属性。但是只有当一个人无助而且必须被覆盖时才应该使用它。

最佳做法是仅在实用程序类中使用!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的上述定义保持为真，除非它没有包含任何其他可以覆盖我们希望在整个应用程序中相同的.btn格式的类。但是一旦它被下面的其他类包裹起来，最终的风格将与你的期望完全不同。

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

现在，为了使您的.btn课程更加强大并受到包装它的尊重，请将.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; }类只不过是一个实用工具。

了解更多信息！重要优先级here。

为什么CSS Frameworks不必要地使用！important标签？

3 个答案: