6 replies

!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;
  }
}

.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

display: none

display: none

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 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;
}

.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

!important

!important

!important on the

hide-mobile

hide-mobile

hide-mobile

hide-mobile utiliity class? Or would it require another solution? Many thanks.