CSS Mistakes
Common mistakes to avoid — learned the hard way.
1. Forgetting box-sizing: border-box
The default content-box makes width NOT include padding/border → layout math is always off.
css*, *::before, *::after { box-sizing: border-box; }
2. Using !important carelessly
🛑
!important breaks the cascade; later, to override it you have to use !important again → a spiral. Only use it for utility classes or third-party fixes.3. Removing focus outline without replacing it
css/* ❌ Breaks accessibility */ button:focus { outline: none; } /* ✅ Off for mouse, kept for keyboard */ button:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; }
4. Setting width: 100% + padding without border-box
It overflows by 100% + padding × 2. All the more reason to fix #1.
5. z-index racing to a million
Manage stacking context by layer (10, 20, 30…). Remember that position: relative + z-index creates a new stacking context — a child’s z-index cannot "escape" its parent.
6. Using float for layout (legacy)
Use Flex/Grid instead. Float’s main remaining role is wrapping text around images.
7. font-size: px for everything
Use rem to respect the font-size users set in their browser (essential for a11y).
css:root { font-size: 16px; } h1 { font-size: 2rem; } .btn { padding: 0.5rem 1rem; }
8. Manual vendor prefixes
Use autoprefixer / PostCSS — don’t type -webkit- by hand.
9. Selectors that are too specific
css/* ❌ high specificity, hard to override */ body div.app section.main ul.list > li.item a { color: red; } /* ✅ flat, use a class */ .list-link { color: red; }
10. height: 100vh on mobile
iOS/Android have a collapsing URL bar → 100vh "jumps". Use 100dvh (dynamic) or 100svh (small).