CSS without using !important and follow DRY principal

Issue

I do not like to use !important on CSS. But unfortunately I have a situation where I cannot ignore it. Do you know how to overcome such situations?

e.g. I need to use this on a number of Ionic pages.

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

If I'll use this on each and every page then I do not need !important. But the above kind of code violates DRY principal.

To follow DRY I can do this:

global.scss

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

So how Can I follow DRY and without using !important on the Ionic 5 app?

Solution

There is nothing wrong with the use of !important¹ but you can always try to increase the specificity of the selector to make sur it will always win.

One idea is to consider ID which has the highest specificity that you combine with the :not() selector. Simply make sure to use a random ID that will never be used:

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

More detail here: Which CSS pseudo-classes don't have specificity?

---

¹: Boostrap uses around 1000 !important (https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css)

Stack Overflow uses around 2970 !important too (https://stackoverflow.com/Content/Shared/stacks.css)

Answered By - Temani Afif