Semantic-ui: Forgo use of !important

[supernintendo]

Steps

Use any CSS rules that use !important, such as .ui.text.container.

Expected Result

!important is not used.

Actual Result

!important is used.

Version

2.3.1

Additional notes

The use of !important is lazy and problematic. It arbitrarily locks users of Semantic UI into its own theming paradigm rather than giving users the freedom to extend the CSS provided by the library with custom rules. Semantic UI developers should opt for scoped CSS rules that are strict enough to override defaults yet easily extended (for example, html.semantic body) rather than brute forcing CSS by way of !important.

[em]

Agreed. Many people have complained about this. The other issues usually end up being referred back to https://github.com/Semantic-Org/Semantic-UI/issues/280

[davegson]

totally agree, it's giving me headaches to implement small, custom changes...

[llturro]

You can easily override !important by adding a rule.

I do not agree with the use of !important being lazy and problematic on utility classes and frameworks. They are just a way to make them robust.

[davegson]

I feel this way to write custom css is rather problematic (and annoying):

.custom-class {
  background-color: #eee !important;
  padding-top: 50px !important;
  border-bottom: 1px solid #ccc !important;
}

It leads to everything having to be !important leading to _nothing_ being important.

[llturro]

As a default? Totally agree, is problematic. But when you coexist with other third-party CSS or expect to allow many element combinations, !important comes in help to make them solid.

An example where there is _nothing more_ is the email boilerplate.

[avalanche1]

I would add that using !important in styling is really hard with React
https://github.com/facebook/react/issues/1881#issuecomment-352295515
And with Semantic you really have to use it if you wish to override SUI styles.

[em]

As a default? Totally agree, is problematic. But when you coexist with other third-party CSS or expect to allow many element combinations, !important comes in help to make them solid.

An example where there is _nothing more_ is the email boilerplate.

Semantic-UI already has a ton of other problems if you attempt to combine it with other CSS frameworks that are not purely isolated to a particular containing namespace (like .ui) . It is fundamentally impossible to have different reset.css's that work nicely together. And any other framework that includes a reset.css is going to break other frameworks - there is nothing those frameworks can reasonable be expected to do about it. reset.css is based on the assumption that it stands alone.

Search the issues and you will find dozens of people who have had problems because they combined Bootstrap with Semantic. The answer to these issues has always been that Semantic does not support combining frameworks. And I'd say that is a reasonable answer.

I'd like to specifically add my two cents on this line: or expect to allow many element combinations.

This is effectively the problem with multiple inheritance (the diamond problem) and the general consensus for avoiding it is never to use multiple inheritance. The same philosophy applies to CSS. This principle that multiple inheritance is just an all around bad idea is so common that most general purpose languages do not even allow it.

For example. If there were two states of button and listitem, active or inactive. It would be a bad idea to have a generic implementation of .active styling that applied to both. listitem.active and button.active should be implemented entirely independently. Mistakes like this are what got semantic into the !important rut it is in today.

[avalanche1]

Totally agree. That's why React invented component isolation and styled-components took it to the next level with styling.

[llamerr]

This is how my styles look like because of this problem

@media only screen and (max-width: 767px) {
  .desktop-only.desktop-only.desktop-only.desktop-only {
    display: none !important;
  }

I think this looks terrible

[lubber-de]

We managed to remove lots of !important in V2.7.x recently :slightly_smiling_face:
https://fomantic-ui.com/introduction/new.html

[supernintendo]

@lubber-de Thanks so much! This should make Semantic UI a more viable option for many more frontend projects. Closing as this is now being actively addressed.

[hammy2899]

This was fixed in Fomantic-UI not SUI.

[supernintendo]

@hammy2899 Ah, misread that. Thanks for reopening.