CSS That Survives a Redesign

Style by class instead of markup shape, let parents own spacing, keep specificity flat, and delete dead CSS safely. After this, a redesign stops being a rewrite.

5 min HTML and CSS Web Development Testing and Debugging Performance Optimization Advanced

Skip ahead: If you already style by classes instead of document structure, let parents own spacing, and delete dead CSS on a schedule, skip to "Common mistakes", then continue.

A redesign does not break CSS that was written for the design. It breaks CSS that was written for the markup. A rule that depends on how many divs sit between two elements is a bet that nobody will ever change the HTML. They will. The way to write CSS that survives is to make it depend on as little as possible: a class on the element, a token for the value, and a parent that decides the space around it.

Style the thing, not its position

/* Fragile: depends on the exact nesting and order */
.sidebar > div:nth-child(2) > p { color: #b42318; }

/* Durable: depends on a class that means something */
.price-note { color: var(--danger); }

I tested the fragile selector on two pages. The first had the paragraph in the second div of the sidebar and it matched, red text. On the second page a developer wrapped the paragraph in one more div for a promo box. The rule stopped matching and the text fell back to rgb(0, 0, 0). Nothing was wrong with the paragraph. The selector had a hidden dependency on the HTML.

Let tokens carry the brand

:root { --brand: #034bff; --radius: 6px; }
[data-brand="harbor"] { --brand: #0b6e4f; --radius: 2px; }
[data-brand="ember"]  { --brand: #b42318; --radius: 999px; }

.btn { background: var(--brand); border-radius: var(--radius); }

With those three blocks, the same .btn computed to rgb(3, 75, 255) with a 6px radius, rgb(11, 110, 79) with 2px, and rgb(180, 35, 24) with 999px. A redesign that changes colour and shape becomes an edit to the tokens. The component does not move.

Components should not set their own outside space

A card that sets margin-bottom: 2rem is wrong the moment it appears inside a grid. Give the spacing to the parent:

.card-list { display: grid; gap: 1.5rem; }

A card with no outer margin works in a list, in a sidebar, and next to a form. This is the same idea as the .stack helper from the first lesson in this course, applied to every component.

Keep specificity flat and leave out `!important`

Every ID selector and every !important is a promise that nobody will need to override this rule. Redesigns break that promise on day one. One class per selector, plus a state at most, and layers for the cases that need an order.

Delete what you do not use

Dead CSS is a redesign tax. Nobody dares touch a rule they cannot explain, so the old and the new pile up. Check unused rules with DevTools Coverage before a redesign, remove what is clearly dead, and keep a note of what you were unsure about.

⚠ Warning: Coverage shows what was unused in one session, not what is dead. A rule for a checkout error or a print stylesheet will look unused until someone checks out wrongly or prints. Test the states before you delete.

Common mistakes

Using nth-child and > chains to avoid adding a class. The class is cheaper than the next breakage.
Building a theme by overriding component rules with a longer selector. Change the token instead.
Using magic numbers (margin-top: 37px) that only work against today's content. Say what the number is for with a token, or remove it.
Never deleting anything, because "someone might need it".

💡 Tip: When you review a CSS change, ask one question: if the HTML around this element changes, does the rule still do what it says?

What happens if you skip this

The redesign takes three times as long, because every rule has to be rediscovered before it can be moved. In the end the team keeps the old stylesheet and adds a new one on top, and the site gets heavier with each redesign.

Try it

Search your stylesheet for selectors with > div, nth-child or more than three levels. Replace three of them with a class and make sure the page looks the same.

Which of your rules would stop working if someone added one wrapper div?

About