0

Working on a legacy project there has been a class added like so:

.resetClass {
    p {
        font-size: 1rem;
    }
}

Now we have classes on a p element for instance

.myClass {
    font-size: 1rem;
}

It is like this on all elements by the way. Now the problem is that the resetClass takes priority because it is more specific.

How can I make sure that the resetClass is not priority so myClass styles are used first?

I hope this makes a bit of sense because I cannot seem to find a fix for this.

Tikkes
  • 4,599
  • 4
  • 36
  • 62
  • You can either use more selectors on the .myClass, so like `p.myClass ...` and put it under resetClass in your CSS file, or you can use `!important` which is a last case scenario and can cause problems for you in the future. – Ameer Jul 23 '21 at 12:35
  • 1
    Tl;Dr Avoid `!important` at all costs. (I don't remember the last time I had to use it). – Roko C. Buljan Jul 23 '21 at 12:36
  • 1
    You should read up on [CSS specificity](https://css-tricks.com/specifics-on-css-specificity/). It defines that `.resetClass p {` is more specific than just `.myClass` so it wins. Use [`!important` to override CSS specificity](https://css-tricks.com/when-using-important-is-the-right-choice/) but we tend to avoid that since it breaks the normal CSS rules. – Ruan Mendes Jul 23 '21 at 12:37
  • 2
    @RokoC.Buljan Avoid it at all costs but there are times when it's necessary (not this case, I believe) https://css-tricks.com/when-using-important-is-the-right-choice/ Overriding 3rd party code is also a case when you may have to resort to `!important` – Ruan Mendes Jul 23 '21 at 12:38
  • @JuanMendes There *are* rare cases where `!important` is the right choice. That article (although recently updated) was initially written in 2011 - in the era of still great cross-browser hackeries (IE). The examples it provides are the exact ones where makes absolutely no sense to use `!important` (and many comments under that article are spot on). I find this one https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity to have a much superior value - as an article about `!important` than the one on CSS-tricks. And BTW... https://jsfiddle.net/mv5wzt70/ – Roko C. Buljan Jul 23 '21 at 13:07
  • 1
    @RokoC.Buljan Long rant that didn't disagree with what I said? I particularly like the image on csstricks https://i2.wp.com/css-tricks.com/wp-content/uploads/2021/01/specificity-calculationbase_rhrovi.png?w=570&ssl=1 – Ruan Mendes Jul 23 '21 at 13:21
  • That article actually described my issue perfectly. We won't be able to fix the issue on our side like this it seems and we will have a discussion to remove the resetClass altogether. Thank you all for the help! Much appreciated! – Tikkes Jul 23 '21 at 13:45

0 Answers0