Blog

How CSS Decides: The Cascade, Specificity, Inheritance and Cascade Layers (@layer)

The cascade decides which of the values written for an element wins, in this order: origin and importance, context, the style attribute, layers, specificity, order of appearance; layers come before specificity. We debug Bookstore's "why isn't this button red?" bug step by step through the protocol DevTools uses, move third-party CSS below our own styles with @layer, and measure inherit/initial/unset/revert/revert-layer in two browser engines.