!important use case

Hey, if i would like to hide an element on mobile and use a utility class along the lines of:

.hide-mobile {
  display: none;
}
@media (min-width: 900px) {
  .hide-mobile {
    display: block;
  }
}

.hide-mobile {
  display: none;
}
@media (min-width: 900px) {
  .hide-mobile {
    display: block;
  }
}

however the element i would like to hide, let's say it's a button, has some styling that overrides the display: none due to it having a higher specificity, causing it not to hide on mobile, for example:

<button class="button hide-mobile">Example<button>

<button class="button hide-mobile">Example<button>

.button {
  display: inline-block; /*This overrides the display: none;*/
  border: 0;
  cursor: pointer;
}

.button {
  display: inline-block; /*This overrides the display: none;*/
  border: 0;
  cursor: pointer;
}

would it be an acceptable case to use !important on the hide-mobile utiliity class? Or would it require another solution? Many thanks.

6 Replies

winston•4mo ago

yess, !important should do the trick

display: none !important;

display: none !important;

snxxwyy•4mo ago

awesome, thank you. would you say it's a valid use case? i know people recommend to avoid using it as it causes problems long term, but for a class like this where it should occur no matter what and important isn't being used to fix or cover up another problem, i imagine it's okay? i could be wrong.

winston•4mo ago

i still have a lot to learn but in this case i would use it, yes. if feel like if you end up using !important multiple times for roughly the same thing it would get complicated indeed, but in your current scenario it will only be used once for this specific thing

snxxwyy•4mo ago

Yeah that’s what I was thinking, I appreciate your insight, and good luck on your learning journey!

winston•4mo ago

good thinking :), youre welcome! thanks a lot! you too :)

snxxwyy•4mo ago

Thanks! 🙏🏻

Gaming

Programming

!important use case