不使用！important 的 CSS 并遵循 DRY 原则

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

例如，我需要在许多离子页面上使用它。

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

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

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

global.scss

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

那么，如何在 Ionic 5 应用程序上不使用 DRY 并且不使用!important呢？

使用^!important1没有错，但您可以随时尝试增加选择器的特异性，以确保它始终获胜。

一个想法是考虑与: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>

更多细节在这里：哪些CSS伪类没有特异性？

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

堆栈溢出也使用大约 2970!important(https://stackoverflow.com/Content/Shared/stacks.css(

相关内容