Everyone hits the same CSS pitfalls when starting out. Knowing them in advance saves hours of confusion. Here are the most common ones and how to avoid each.
The usual suspects
- Forgetting box-sizing: border-box, so padding breaks widths
- Fighting specificity by piling on !important
- Using absolute positioning for layouts that should use Flexbox/Grid
- Magic numbers — random values like margin-top: 37px
- Removing focus outlines and hurting accessibility
- Not setting the viewport meta tag
- Inline styles scattered everywhere
- Over-nesting selectors like .a .b .c .d span
!important is not a fix
.title { color: red !important; }/* use a single, low-specificity class */
.title { color: red; }Reaching for !important to win a specificity battle. It makes future overrides even harder. Lower the competing specificity instead.
Layout with the right tool
.card { position: absolute; top: 120px; left: 40px; }.grid { display: flex; gap: 16px; }Using position: absolute to place everything. It removes elements from normal flow and breaks responsiveness. Use Flexbox or Grid for layout.
Avoid magic numbers
.a{margin-top:37px}.b{margin-top:13px}/* scale: 8 / 16 / 24 / 32 */
.a{margin-top:32px}.b{margin-top:16px}Sprinkling arbitrary values makes layouts fragile and inconsistent. Use a spacing scale.
Start every project with box-sizing: border-box, a spacing scale, low-specificity classes, and a visible focus style. These four habits prevent most beginner pain.
Open a page you built earlier and run it against the checklist above. Fix anything missing — most often it is box-sizing or a magic number.
1. Why avoid !important?
2. Best tool for laying out a row of cards?
3. What is a "magic number"?
- Set box-sizing: border-box globally from day one.
- Avoid !important — lower specificity instead.
- Use Flexbox/Grid for layout, not absolute positioning.
- Use a spacing scale and keep selectors short.