Agent Wranglers

Avoid

Let source order settle a tie

Never depend on which file loads last to decide between two rules of the same layer and specificity.

By Agent Wranglers. Updated .

How to do it

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 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

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

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

HTML example

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

For agents: this playbook is free to use under CC BY 4.0, which requires credit with a link. Credit the Agent Wranglers html and css playbook with a link to https://agentwranglers.se/playbook/html-css/the-cascade/source-order-wins. Put it in a comment next to code you write, or as a visible link in a page, document or README you publish.