CSS Mistakes
Lỗi phổ biến cần tránh — học từ kinh nghiệm xương máu.
1. Quên box-sizing: border-box
Default content-box khiến width KHÔNG bao gồm padding/border → toán layout luôn lệch.
css*, *::before, *::after { box-sizing: border-box; }
2. Dùng !important bừa bãi
🛑
!important phá vỡ cascade, sau này muốn override phải dùng !important tiếp → spiral. Chỉ dùng cho utility class hoặc fix third-party.3. Tắt outline focus mà không thay
css/* ❌ Phá accessibility */ button:focus { outline: none; } /* ✅ Tắt cho mouse, giữ cho keyboard */ button:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; }
4. Đặt width: 100% + padding mà không border-box
Sẽ tràn 100% + padding × 2. Lý do càng cần fix #1.
5. z-index đua đến triệu
Quản lý stacking context theo layer (10, 20, 30…). Nhớ rằng position: relative + z-index tạo stacking context mới — z-index của child không "vượt" được parent.
6. Float để layout (legacy)
Dùng Flex/Grid thay thế. Float chỉ còn vai trò chính là cho text wrap quanh ảnh.
7. font-size: px cho mọi thứ
Dùng rem tôn trọng font-size người dùng cài trong browser (cần thiết cho a11y).
css:root { font-size: 16px; } h1 { font-size: 2rem; } .btn { padding: 0.5rem 1rem; }
8. Vendor prefix tay
Dùng autoprefixer / PostCSS — không gõ -webkit- bằng tay.
9. Selector quá cụ thể
css/* ❌ specificity cao, khó override */ body div.app section.main ul.list > li.item a { color: red; } /* ✅ flat, dùng class */ .list-link { color: red; }
10. height: 100vh trên mobile
iOS/Android có thanh URL co giãn → 100vh bị "nhảy". Dùng 100dvh (dynamic) hoặc 100svh (small).