CSS 不使用 !important 并遵循 DRY 原则

Question

我不喜欢在 CSS 上使用 !important。但不幸的是，我有一种情况，我不能忽视它。你知道如何克服这种情况吗？

例如我需要在多个 Ionic 页面上使用它。

.font-bold {
    font-weight: bold;
}

如果我将在每一页上都使用它，那么我不需要!important。但上述代码违反了 DRY 原则。

要遵循 DRY，我可以这样做：

global.scss

 .font-bold {
        font-weight: bold !important;
    } 

那么我如何在 Ionic 5 应用上不使用 !important 的情况下关注 DRY？

Answer 1

!important¹ 的使用并没有错，但是你总是可以尝试增加选择器的特异性以使其永远获胜。

一个想法是考虑与:not() 选择器结合的具有最高特异性的ID。只需确保使用永远不会使用的随机 ID：

.font-bold:not(#randomID) {
  font-weight: bold;
}

.box p {
  font-weight: 200;
}

<div class="box">
  <p>some text here</p>

</div>

<div class="box">
  <p class="font-bold">some text here</p>
</div>

更多细节在这里：Which CSS pseudo-classes don't have specificity?

---

¹：Boostrap 使用大约 1000 个 !important (https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css)

Stack Overflow 也使用了大约 2970 个 !important (https://stackoverflow.com/Content/Shared/stacks.css)