!important & Layers Cascade Tester

The CSS cascade is the algorithm browsers use to resolve conflicting CSS declarations. When multiple rules target the same element and property, the cascade determines which one "wins" based on: origin & importance (user-agent, user, author, with !important flipping priority), layer order (later layers override earlier ones for normal styles), specificity (higher specificity wins), and finally source order (last one wins if everything else is equal).

!important raises a declaration to a higher priority tier. Within the author origin, !important declarations beat all normal declarations regardless of specificity or layer. Crucially, !important reverses the layer order: in normal styles, later layers win; in !important styles, earlier layers win. Unlayered !important styles have the highest priority of all author styles. This reversal often surprises developers.

@layer lets you define explicit cascade layers, giving you control over which styles take precedence regardless of specificity. This is especially useful in large projects where you want to ensure your base styles are overridden by component styles, which are overridden by utility styles. Layers make specificity management much easier and reduce the need for !important hacks.

Specificity is a weight assigned to a CSS selector, expressed as a triplet (a, b, c): a counts ID selectors, b counts class selectors + attribute selectors + pseudo-classes, and c counts type (element) selectors + pseudo-elements. For example: #demo-box = (1,0,0), .demo-box = (0,1,0), div.demo-box = (0,1,1). Higher values win when layers and importance are equal. Inline styles beat all selectors, but can be overridden by !important.

This is by design in the CSS specification. Normal styles follow "later layers win" because later layers are meant to build upon and override earlier ones. But !important is meant to signal "this is critically important and should not be easily overridden." Reversing the layer order for !important means that foundational/base layers get the strongest !important protection, preventing later layers from accidentally overriding critical declarations with their own !important rules. It encourages putting essential !important overrides in earlier (more foundational) layers.

Unalayered styles (CSS not wrapped in any @layer) have higher priority than all layered normal styles, regardless of specificity. This means unlayered styles will always override layered normal styles. For !important, unlayered !important styles have the absolute highest priority of all author-origin styles. This is why many developers place third-party CSS in layers to ensure their own unlayered styles can easily override them.

@layer is supported in all modern browsers: Chrome 99+, Firefox 97+, Safari 15.4+, and Edge 99+. It's safe to use in production for most projects today. For older browsers, layered styles degrade gracefully—they simply behave like unlayered styles, and the cascade falls back to specificity and source order.