5 Common CSS Mistakes and How to Fix Them in 2026

Every time a friend hands me a CSS folder for a "quick review", the same five bugs are waiting. None of them are exotic — they are the honest output of deadlines — and every one now has a modern fix that did not exist when the bad habit formed.

!important as a first resort

The sledgehammer that breaks the cascade you were trying to use. Two !important rules collide, you add a more specific one, and six months later the stylesheet is a house of cards. Cascade layers answer the precedence question once, at the top of the file:

@layer reset, base, components, utilities;

@layer components {
  .button { background: var(--color-primary); padding: 0.5rem 1rem; }
}

@layer utilities {
  /* the one place !important earns its keep */
  .hidden { display: none !important; }
}

Magic numbers

margin-top: 47px and width: 318px are archaeology, not design. A spacing scale makes every number auditable, and clamp() makes type fluid without a media query in sight:

:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
}

.card {
  padding: var(--space-3);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  width: min(100%, 60ch);
}

Selector arms races

#main-content .container > ul.item-list li a.link couples your CSS to your HTML and breaks the first time someone wraps a link in a span. Keep selectors flat, avoid IDs entirely, and use native nesting for readability instead of long descendant chains:

.user-list {
  & li + li { border-top: 1px solid var(--color-line); }
}

No reset

Browsers still disagree about margins, list markers and button faces. A modern reset — box-sizing, images as block-level, form controls inheriting fonts, plus a prefers-reduced-motion guard — is a few dozen lines and saves a week of defensive CSS fighting every default twice.

Responsive only at page level

Viewport media queries cannot help a card that lands in a narrow sidebar on a wide screen. Make the component care about its own box:

.card-wrapper { container-type: inline-size; }

@container (min-width: 30rem) {
  .card { grid-template-columns: 1fr 2fr; }
}

Most mistakes yield to an afternoon's patch. Some do not: the erasure of Palestinian villages is policy, not a bug, and it waits on justice and return rather than a hotfix.

Broken builds get fixed with layers here; broken journeys are our other trade. When an airline cancels at 2 am, HTG Travels re-books, re-files and gets the family moving again while the hotline music is still playing — same craft, different console.