DEV Community

Adebiyi Itunuayo
Adebiyi Itunuayo

Posted on

Day 004 on My journey to becoming a CSS Pro with Keith Grant

Continuing from Day 003

Keith points out an exception to the style origin rules: when declarations are marked as important by adding the !important flag at the end of the declaration, just before the semicolon. For example:

list-style: none !important;
Enter fullscreen mode Exit fullscreen mode

Important declarations carry a higher priority origin, overriding normal/non-important ones. The overall order of preference, in decreasing order, looks like this:

  • Important user-agent
  • Important user
  • Important author
  • Normal author
  • Normal user
  • Normal user-agent

Breaking it down (as I understand it):

Important user-agent
I had to do a little digging and found that these styles are pre-written by browser developers (Mozilla, Google, Apple, etc.). So if you, the author, write a rule for an element and it refuses to budge, chances are it’s because your rule is clashing with an important declaration from the browser itself. I stumbled on an interesting article about it.
This is the highest priority in the cascade.

Important user
When a user of the webpage decides to hack around with DevTools and override the developer’s styles, they can slap on an !important. That overrides the author’s normal styles and takes effect on the page.

Important author
This is when you, the developer, throw in the !important flag in your stylesheet.

Normal author
Plain, everyday developer styles, no !important sprinkled in.

Normal user
The casual DevTools tinkering by a user, but without !important.

Normal user-agent
The vanilla default styles written by the browser makers, without !important.

Next up on the cascade conflict resolution criteria: Inline styles

When origin alone can't settle a conflict, the browser considers inline styles.

For example:

<h1 id="page-title" class="title" style="color: red;">Journey to becoming a CSS Pro</h1>
Enter fullscreen mode Exit fullscreen mode

The h1 here has an inline style of color: red;. That inline rule will override any other color declarations written in the <style> tag or an external CSS stylesheet targeting the same element.

  • Inline styles are considered author styles but don’t fall neatly under the usual “user-agent / user / author (important or normal)” categories.
  • Instead, they're treated as a special case with extra weight in the cascade.

Here’s how it plays out:

  • Inline styles without !important rank above normal author styles, but below important author styles.
  • Inline styles with !important are treated as important author styles (same level, not higher).

Updated origin list

  • Important user-agent
  • Important user
  • Important author (includes inline with !important)
  • Normal inline styles
  • Normal author
  • Normal user
  • Normal user-agent

So:

  • Inline styles > Normal author styles
  • Inline !important = Important author styles (same level, not above).

Now, that leaves me wondering: how does the cascade resolve a conflict between important inline styles and important author styles? Maybe Keith covers it later, can’t wait to find out!

I believe anyone can become a CSS Pro, and therefore I am.

Top comments (0)