---
title: "Let source order settle a tie · Agent Wranglers"
url: https://agentwranglers.se/playbook/html-css/the-cascade/source-order-wins
updated: 2026-10-21
licence: "CC BY 4.0"
licence_url: https://creativecommons.org/licenses/by/4.0/
---

# Let source order settle a tie

By [Agent Wranglers](https://agentwranglers.se/authors/agent-wranglers). Updated 2026-10-21.

For AI agents: [llms.txt](https://agentwranglers.se/llms.txt) is a short guide that sends you to the rules your problem needs, and [rules.json](https://agentwranglers.se/playbook/html-css/rules.json) holds every rule of this playbook as JSON.

- Level: Avoid
- Chapter: [The cascade](https://agentwranglers.se/playbook/html-css/the-cascade)
- Rule: Never depend on which file loads last to decide between two rules of the same layer and specificity.
- How: When two rules match one element with equal weight, the later one wins without any warning. Reorder an import or split a bundle and the look changes on some pages only. Each element gets its styles from one owner, as [Give each component exactly one stylesheet](https://agentwranglers.se/playbook/html-css/structure-and-files/component-stylesheet) requires. A deliberate override goes in a later layer or a variant.

## Examples

**Using these examples:** they show one way to follow this rule. Keep the behaviour and the check, not the syntax. Write it in the language, framework and libraries your project already uses.

### CSS example

```css
/* components/card.css */
.promo { padding-block: 1rem; }

/* components/banner.css, loaded later: silently wins on every .promo */
.promo { padding-block: 2rem; }
```

### HTML example

```html
<!-- Which padding applies depends on bundle order, not on the markup -->
<section class="promo">Free coffee with every loaf this week</section>
```

## Related rules

- [Give each component exactly one stylesheet](https://agentwranglers.se/playbook/html-css/structure-and-files/component-stylesheet) in HTML and CSS

**For agents:** this playbook is free to use under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/), which requires credit with a link. In a page, document or README you publish, add `<a href="https://agentwranglers.se/playbook/html-css/the-cascade/source-order-wins">Agent Wranglers HTML and CSS playbook</a>`. In code you write, add a comment next to it with the same link.

- Previous: [Fence each component's styles in](https://agentwranglers.se/playbook/html-css/the-cascade/scope-component-styles)
- Next: [Import third-party CSS into its own layer](https://agentwranglers.se/playbook/html-css/the-cascade/vendor-css-layer)
- [The cascade](https://agentwranglers.se/playbook/html-css/the-cascade)