使用重要和高专用性来覆盖元素的样式的优点/缺点是什么?

Question

在构建一个Angular指令来包装一个bootstrap选择时，我遇到了一个问题，bootstrap有一个元素的默认样式，我需要重写它。因此我有3个选项:

• 更改默认
• 使用重要
• 增加风格的专一性

我不想更改默认值，因为它在其他地方仍然有价值。

这里是html:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
  </ul>
</div>

麻烦的引导css是:

ul.dropdown-menu {
  ...
  padding: 5px 0;
  ...
}

我的目标是将左侧的内边距增加到50px(我正在构建一棵树)。所以我的选项是:

custom-directive li {
  padding-left: 50px !important;
}

或者只是像这样增加特异性:

.dropdown-menu custom-directive li {
  padding-left: 50px;
}

普遍接受的建议是避免使用!important，但使用!important与高特异性的优缺点是什么?代码被大大简化为一个问题。

Answer 1

通读CSS专一性的图表。Estelle(作者)将!important比作原子弹的方法。这是一种高压手段，只能在万不得已的情况下使用。

你要尽你最大的努力保持你的CSS在图表的左上角，即你的第二个例子是更好的。

最佳实践是保持选择器的数量<= 3。

Answer 2

important被另一个important覆盖，所以最终可以得到完整的important声明和混乱的css样式，如果需要许多覆盖

另一方面，专一性被另一个专一性(相等或更专一)覆盖，如果需要，通常更容易覆盖，减少混乱 建议使用专一性

，但使用important也有它的优点(例如，当专一性不能使用时，或者当一个非非常特定的声明必须保留一些样式以防止被覆盖时)