Two CSS rules with identical specificity set the same property on one element. Which declaration wins, and what determines that order in a bundled stylesheet?

## The rule Source order is the cascade's final tiebreak. After origin and importance, after cascade layers if any are used, and after the specificity triples have been compared column by column, if the candidates are still tied then the declaration that appears later wins. That is why the classic "just move it below" fix works, and why a duplicated rule at the bottom of a file silently defeats the one at the top. ```css .button { background: blue; } .button { background: green; } /* wins — same 0-1-0, appears later */ ``` ## What "later" actually means The browser does not reason about files. It builds one ordered sequence of style rules for the document and asks where each declaration sits in it. That sequence comes from, in order: 1. **Document order of the stylesheet-bearing elements** — every `<link rel="stylesheet">` and every `<style>` element, in the order they appear in the markup. A sheet linked in the `<head>` comes before one linked at the end of `<body>`. 2. **`@import` position within a sheet.** An imported sheet's rules take the place of the `@import` rule itself. Since `@import` must appear before any style rules in the sheet (following only `@charset` and `@layer` statements), imported rules land ahead of the importing file's own rules. 3. **Concatenation order inside each sheet.** If a build step merges twenty source files into one stylesheet, the merge order *is* the source order for every rule in them. 4. **Runtime insertion.** A `<style>` element created and appended after load takes the position of the element it was appended at — usually the end of `<head>`, which puts it after everything linked earlier. This is where the surprises live. Developers reason about the file they are editing and forget that the file's position was chosen by an import graph or a glob pattern in a build config. ## The diagnosis When an override with a correct, matching, equal-specificity selector does not take effect, work through it in this order: - **Are the triples actually equal?** A single extra class in the other rule ends the discussion before source order is reached; recount both selectors rather than assuming. - **Are they in the same layer?** If cascade layers are used, layer order is decided before specificity and before source order, so a rule in a later-declared layer wins whatever its position in the file. - **Where do the two files sit in the flattened order?** Check the actual link/import/bundle order, not the directory listing. - **Is the winner even a stylesheet rule?** If it came from the `style` attribute, source order is irrelevant. ## Why the mechanism-correct fix is ordering There are three ways to make a tied rule win, and they are not equivalent. You can move it later, which changes nothing about how either selector scores and leaves both rules readable. You can inflate the selector — duplicate a class, add an ID — which wins by raising specificity and permanently raises the bar for anyone overriding it later. Or you can add `!important`, which wins by skipping to an earlier cascade step and raises that bar even higher. Ordering is the only one of the three that does not leave a ratchet behind. This is why the load order of a stylesheet is a real architectural decision: resets first, then base element styles, then components, then the narrow overrides — an order chosen precisely so that the rules you expect to win are already last, and equal-specificity conflicts resolve the way a reader would guess. ## The flip side: order dependence is fragile A stylesheet whose correctness depends on subtle file ordering breaks the day someone reorders an import or a bundler changes its traversal. That fragility is the honest argument against relying on ordering as your main override tool at scale — the reason cascade layers exist is to make "this group of rules loses to that group" an explicit, declared fact rather than an emergent property of concatenation order. Naming that tradeoff, rather than just reciting "last one wins", is what distinguishes a senior answer here.