Why I spent years trying to make CSS states predictable

Have you ever changed the order of two CSS rules and broken a component without changing the logic? .btn :hover { background : dodgerblue ; } .btn [ disabled ] { background : gray ; } Both selectors have specificity (0, 1, 1) . When a button is both hovered and disabled, the browser falls back to source order. If the :hover rule comes last, the disabled button turns blue. If the [disabled] rule comes last, it stays gray. That sounds small, but it points to a bigger problem: component state in CS