When two CSS declarations set the same property on the same element, the cascade chooses one value. Adding `!important` before the semicolon, as in `color: red !important;`, gives a declaration priority over normal declarations—even ones with more specific selectors. It does not make the declaration universally unbeatable. section 1.1.1 section 1.1.3
For declarations from different origins, the priority order is:
- Important user-agent → important user → important author. section 1.1.1
- Normal author → normal user → normal user-agent. The order of the important origins reverses the normal-origin order. section 1.1.1
A navigation-link conflict
Suppose `#main-nav a` gives every navigation link a teal background, while `.featured` should make one link orange. The ID selector wins over the class selector. Adding `background-color: orange !important;` to `.featured` works, but it creates a future override problem: if competing declarations are also important, specificity matters again. A more maintainable fix is to use `.nav a` for the general style and `.nav .featured` for the exception. section 1.1.3
Inline styles present another constraint: a normal declaration in a stylesheet cannot override an inline declaration, but an important stylesheet declaration can. Prefer removing the inline style when you control the markup. For distributed components, a stylesheet and JavaScript-managed classes leave users more room to customize styles than JavaScript-applied inline styles do. section 1.1.2 section 1.1.4
@layer reset {
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
}
A reduced-motion reset shows a deliberate use: important duration and scroll-behavior declarations take effect when `prefers-reduced-motion: reduce` matches. Near-zero durations make motion unnoticeable while allowing behavior that depends on events such as `animationend` to continue. section 15.1
