Semantic-ui: Don't use !important in CSS definitions

[rijk]

Hi,

I use and like the library, in general I think it sets some good guidelines. For example not using classes excessively, but rather using smart CSS selectors like :checked, ~ etcetera.

That said, I was really surprised to find occurrences of !important in the CSS, which is a commonly considered bad practice and makes customising the components really hard, even when using the overrides file.

For example, here's a snippet from the checkbox toggle CSS:

/* Active */
.ui.toggle.checkbox input:checked ~ .box,
.ui.toggle.checkbox input:checked ~ label {
  color: rgba(0, 0, 0, 0.95) !important;
}
.ui.toggle.checkbox input:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ label:before {
  background-color: #f96332 !important;
}
.ui.toggle.checkbox input:checked ~ .box:after,
.ui.toggle.checkbox input:checked ~ label:after {
  left: 2.15rem;
}
/* Active Focus */
.ui.toggle.checkbox input:focus:checked ~ .box,
.ui.toggle.checkbox input:focus:checked ~ label {
  color: rgba(0, 0, 0, 0.95) !important;
}
.ui.toggle.checkbox input:focus:checked ~ .box:before,
.ui.toggle.checkbox input:focus:checked ~ label:before {
  background-color: #ff4103 !important;
}

I doubt this is even necessary, as the selector must be more specific than the regular checkbox's. Making matters even worse, the !important rule is applied for both :checked and :focus:checked.

Let's say I want to override the toggle track background color, to always be the same. Normally, I would only have to do this:

.ui.toggle.checkbox label:before {
  background-color: rgba( 0, 0, 0, .1 ) !important;
}

However, because of the above, I now need these useless extra rules to specifically override all the !importants as well:

input:checked ~ label:before,
input:focus ~ label:before,
input:focus:checked ~ label:before {
  background-color: rgba( 0, 0, 0, .1 ) !important;
}

And the same goes if I don't want the label to change color (because I've changed it to white):

input:checked ~ label,
input:focus:checked ~ label {
  color: inherit !important;
}

I hope this gives a clear case of the downsides of !importance. Interested in your opinions!

[avalanche1]

+1
I'm not a CSS expert, unlike Jack, but for me it also is a real pain to override some rules using !important

[jlukic]

I've discussed this in at least a dozen threads, one as recently as yesterday #3041. Please refer to my explanations there.