semantic !important modifier interfering with styling

Question

Is there any way to disable all these !important options in semantic-ui?

I keep running into issues with things like:

.ui.right.sidebar {
    right: 0!important;                       /* why is this important */
    left: auto!important;                     /* why is this important */
    -webkit-transform: translate3d(100%,0,0); /* why is this NOT important */
    transform: translate3d(100%,0,0);         /* why is this NOT important */
}

Why does almost every positioning property have !important? Is there a way to compile semantic omitting the !important modifiers? It is interfering with my custom styling, and I have to do extra work that feels hacky (like countering margin: 0!important; with padding-top: NNpx and just hope that at least one isn't marked as !important in any of the states it could be in)

[Here](http://stackoverflow.com/a/11178731/4256677) are some options — varontron, Oct 02 '16 at 23:16

score 0 · Accepted Answer · edited May 23 '17 at 12:33

Disabling !important in semantic-ui is a bad idea as it may lead to unpredictable results. To understand more about why there are !important keywords in the framework, here are some statements made by Jack Lukic, the author of SUI:

..CSS should have a specificity property for defining priority (it was part of the original discussion when creating css), however they left us with automatic weight calculations from an arbitrary point system.

This is pretty terrible when you run into something that happens to be classified less ".ui.button" lets say, having to override '.ui.menu .ui.button' , there are only two solutions, arbitrarily increasing weight by repeating class names in selectors, or using important...

Source 1

And also here (among other places):

...CSS specificity has always been a terrible sort spot of the standard, instead of giving developers a way to assign priority to rules we have to with two options, increase rule specificity or 'drop the hammer' with !important.

A lot of css rules in semantic aren't able to increase specificity beyond a certain point. The only assumption we can make about a red ui button is that it will have classes .ui.red.button, no greater specificity can be gained by altering the selector. If we then have a rule that appears later with the same or greater specificity we're stuck without important.

I'm positive that each decision to use important in semantic was after dealing with no other option. This happens a bit more than other libraries because the specificity is so granular in the library.

If you want to override the behavior, you can do two things:

Use one of the 3000 theming CSS variables in SUI

OR

Override the behavior by using more specific selectors See this

One way to make your custom CSS more specific is to use an id in the body tag of your page and use the following selector:

#bodyid .create-new-menu-btn {
     //Properties }

semantic !important modifier interfering with styling

1 Answers1