[myfonj]

Well the `!important` is a good example if general misunderstanding of the core basics of the CSS: the cascade. People usually think it means something like "override everything what was declared up until now in a way I don't need to check the selector specificity", while in reality it means *"teleport this certain declaration to the higher mirror cascade origin realm"*, what is way cooler yet mostly unknown concept of CSS.

    There are _Browser_ styles, that are overridden by parts of —
    — _User_ styles, that are overridden by parts of —
    — _Author_ Styles, that are overridden by —
    — !important parts of _Author_ Styles, that are overridden by —
    — !important parts of _User_ Styles, that are overridden by —
    — !important parts of _Browser_ Styles.

What is a neat mechanism, isn't it? The "weakest" can have the last word here.

Sadly neglected concept of the web standards is that they were conceived not as rigid projectors of what authors create, but as a platform where individual user agents process authors' contents and negotiate the way how their users want to consume it. One of the first Håkon Wium Lie's CSS proposals even had some "weights" for individual attributes, so that user could express "I prefer serif fonts for headings this much" and author could express that "I suggest this sans serif font for heading with such weight, but it is not so important and my content will make sense in different font faces as well, but it is crucial that this particular text will be slanted, otherwise user would miss important aspect of information."

-- https://www.w3.org/People/howcome/p/cascade.html

[stevage]

Whoa, that's weird. So once there is `!important`, the order of precedence flips? I'm sure there was a good reason for that...

[Macha]

Your OS had a dark theme, that gets represented in the browser as a not !important user style. The website should be able to override this to avoid the white text on white background problem.

But then if the user is tweaking a specific site, the user should be able to override anything with ! important if they really mean it.

[stevage]

Yeah, I understand that in general.

But what's curious is that normally it goes browser < user < author, but with !important, it flips so that browser > user > author. Specifically the part where the browser now outranks the user style is interesting.

[myfonj]

These are (presumably) for things that even user styles are not supposed to be able to "break". Sifting through https://meiert.com/en/blog/user-agent-style-sheets/ shows quite reasonable things such as

    @media (scripting) {
      noscript {
        display: none !important;
      }
    }

    optgroup {
      float: none !important;
      position: static !important;
      white-space: nowrap !important;
      word-wrap: normal !important;
    }

in the Firefox UA styles (though I'd permit overriding the former and I'd expect shadow DOM to handle the latter), or

    input[type="password" i] {
        -webkit-text-security: disc !important;
    }

in the Chrome UA style.

[matheusmoreira]

I believe the reason is to allow users to override websites.