CSS without using !important and follow DRY principal

Question

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?

Make the css rule more specific maybe. What's taking precedence without the !important? — David, May 24 '20 at 19:01
@David Then it tightly coupled with the UI layout no? I would like to use above code just like utility method. — Sampath, May 24 '20 at 19:03
maybe something like this `.font-bold:not(#random) { font-weight: bold; }` ? you increase the specificity with an ID selector — Temani Afif, May 24 '20 at 19:05
Then add your rule in another scss file and import it in your components? But I'd like to know what happens if you don't use the !important... what's taking precedence? — David, May 24 '20 at 19:16
@TemaniAfif ID selector will not work here since the `global.scss` file is a Root file and pages are in too deep to the folder structure. And reusability is very less when we use IDs. Do you know how utility libraries do this job? Do they use `!important`? — Sampath, May 24 '20 at 19:17
@David It has this on the page level `.sc-ion-label-md-s h2 { margin-left: 0; margin-right: 0; margin-top: 2px; margin-bottom: 2px; font-size: 16px; font-weight: normal; }` All are default due to Ionic components and etc. I didn't give any of these. — Sampath, May 24 '20 at 19:21
yes all of them use !important .. and you don't need to add an ID, I used a trick with not() to increase the specificity of the selector, try and see. — Temani Afif, May 24 '20 at 19:22
in bootstrap you will find around 1000 important: https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css — Temani Afif, May 24 '20 at 19:23
@TemaniAfif Oh `1042` :D It gave me some relief to me. Thanks. — Sampath, May 24 '20 at 19:25
@TemaniAfif I didn't get your trick here `.font-bold:not(#random) { font-weight: bold; }` What is `#random` Could I have an example of usage this? — Sampath, May 24 '20 at 19:34
https://jsfiddle.net/on50e1sb/ : random is simply a *random* string ;) — Temani Afif, May 24 '20 at 19:36
related: https://stackoverflow.com/a/50633333/8620333 / https://stackoverflow.com/a/59364095/8620333 — Temani Afif, May 24 '20 at 19:37
@TemaniAfif Oh.. It is working. Is this good practice or not? I hope you could put this as an answer here too. Thanks. — Sampath, May 24 '20 at 19:43
I would say it's a bit hacky but if something is working then it's a good practise for me. By the way, important is the logical way to do — Temani Afif, May 24 '20 at 19:59

score 3 · Accepted Answer · edited May 24 '20 at 20:08

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)

CSS without using !important and follow DRY principal

1 Answers1