5

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

例如 Foundation 带有数百个 !important 标记，用于在我看来不需要它们的东西：

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

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

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

4

3 回答 3

6

如果您编写自己的 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; }
于 2015-01-20T10:13:48.533 回答
2

是因为你可以在你的代码中拥有 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/

在这种情况下，文本将右对齐。重要的是，第二段将居中。

类对 id 等只有低优先级。

于 2015-01-20T10:10:52.157 回答
-1

在您的 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; }提到的类在这里只不过是一个实用程序。

在此处了解更多信息！重要优先级。

于 2015-01-20T10:38:43.237 回答