CSS Specificity Traps Checklists That Survive Audit Day
You inherit a project, open the main CSS file, and there it's: !important after !important , selectors six levels deep, and a trail of #id hacks that ...
10 articles in this category
You inherit a project, open the main CSS file, and there it's: !important after !important , selectors six levels deep, and a trail of #id hacks that ...
You open the inspector. Three buttons, same class, three different colors. No one on the team remembers where each color came from. Welcome to specifi...
Dark mode toggles should be straightforward: click a button, colors swap. But sometimes the switch flips, and nothing changes. Or only half the page u...
You're staring at the browser. A button should be blue—the component styles say color: blue —but it's stubbornly gray. The utility class text-blue-500...
You're staring at a selector five levels deep. It works—but the next developer (maybe you, next month) needs to change one color. You drag a var(--btn...
So you've got a stylesheet where !important shows up every 20 lines. Maybe the last person who touched it was in a hurry. Maybe the designer asked for...
You know that feeling. Three hours deep, chasing a aesthetic that just won't stick. You inspect, you tweak, you add !critical . Nothing works. Then, b...
You've been there. A tiny CSS adjustment break three seemingly unrelated component. You add an !critical , then another, until your stylesheet looks l...
You've been there. A Friday afternoon, a seemingly innocent button aesthetic adjustment, and suddenly half the site's modals render with 12px text. Th...
It starts with one innocent override. A designer asks for slightly different spacing on a button inside a modal. The developer, up against a deadline,...