10 lỗi CSS làm giao diện “xấu đau xấu đớn” rất hay dính

1) Dùng quá nhiều đơn vị tuyệt đối (px) cho mọi thứ

• Dấu hiệu: Font to/nhỏ bất thường trên màn hình khác nhau, layout dễ vỡ khi zoom, người dùng tăng cỡ chữ là UI nát.
• Vì sao xấu: Thiết kế bị “cứng đơ”, thiếu cảm giác responsive và khó tiếp cận (accessibility).
• Cách sửa: Dùng rem/em cho chữ và khoảng cách, % hoặc min()/max()/clamp() cho layout.

html { font-size: 16px; }
h1 { font-size: clamp(24px, 2.4vw, 40px); }
p  { font-size: 1rem; line-height: 1.7; }
.container { width: min(1100px, 92%); }

2) Quên “reset/normalize” nên mỗi trình duyệt mỗi kiểu

• Dấu hiệu: Cùng một trang mà Chrome nhìn ổn, Safari/Firefox nhìn lệch spacing, heading bị phình, danh sách thụt vào lạ.
• Vì sao xấu: Default style của browser làm UI thiếu nhất quán.
• Cách sửa: Dùng reset tối giản, đặc biệt là box-sizing và margin mặc định.

* { box-sizing: border-box; }
body { margin: 0; }
img { max-width: 100%; height: auto; display: block; }

3) Lạm dụng margin “chữa cháy” thay vì bố cục đúng

• Dấu hiệu: CSS toàn margin-top: 37px, margin-left: 19px để canh cho “tạm đẹp”.
• Vì sao xấu: Chỉ đẹp ở đúng một chỗ, đổi nội dung là lệch; bảo trì cực khổ.
• Cách sửa: Dùng Flex/Grid và gap để tạo khoảng cách chuẩn, ít hack.

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

4) Dùng line-height sai khiến chữ “ngộp thở”

• Dấu hiệu: Đoạn văn dày cộm, đọc mệt; hoặc chữ bị “loãng”, trôi lềnh bềnh.
• Vì sao xấu: Typography quyết định cảm giác “xịn” hay “rẻ”. Sai line-height là nhìn nghiệp dư liền.
• Cách sửa: Với body text, thường ổn ở 1.6–1.8. Tránh set bằng px.

body { line-height: 1.7; }
h1, h2, h3 { line-height: 1.2; }

5) Chọn font-size lung tung, không có “thang bậc”

• Dấu hiệu: Tiêu đề và nội dung nhìn “bằng vai phải lứa”, không biết đâu là chính phụ.
• Vì sao xấu: Không có hierarchy (phân cấp thị giác) thì UI rối và thiếu trọng tâm.
• Cách sửa: Dùng scale đơn giản, ví dụ 14/16/20/24/32 hoặc dùng clamp() cho heading.

body { font-size: 16px; }
.small { font-size: 14px; }
.h3 { font-size: 20px; }
.h2 { font-size: 24px; }
.h1 { font-size: clamp(28px, 3vw, 40px); }

6) Màu chữ và nền thiếu tương phản

• Dấu hiệu: Nhìn “mờ mờ ảo ảo”, đọc lâu nhức mắt, đặc biệt trên màn hình ngoài trời.
• Vì sao xấu: Thiếu contrast làm UI vừa kém sang vừa kém accessibility.
• Cách sửa: Chữ body đừng quá nhạt; nền sáng thì chữ nên đủ đậm. Dùng 2–3 mức màu chữ (primary/secondary/muted) thay vì 10 màu linh tinh.

:root {
  --text: #111;
  --text-muted: #555;
  --bg: #fff;
}
body { color: var(--text); background: var(--bg); }
.muted { color: var(--text-muted); }

7) Lạm dụng box-shadow và border-radius “cho có vẻ hiện đại”

• Dấu hiệu: Card nào cũng bóng đổ dày, bo tròn quá đà, nhìn như theme rẻ tiền.
• Vì sao xấu: Shadow và radius là gia vị. Đổ quá tay là “ngấy”.
• Cách sửa: Dùng shadow nhẹ, nhất quán. Radius có hệ thống (6/10/14 chẳng hạn), đừng mỗi nơi một kiểu.

.card {
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

8) Dùng ảnh không kiểm soát kích thước và tỉ lệ

• Dấu hiệu: Ảnh bị méo, bị cắt kỳ quặc, nhảy layout khi tải xong.
• Vì sao xấu: Hình ảnh là điểm đập vào mắt đầu tiên. Méo một cái là “phèn” ngay.
• Cách sửa: Dùng aspect-ratio và object-fit. Set kích thước khung trước để hạn chế nhảy layout.

.thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

9) Không có trạng thái hover/focus nên UI “câm”

• Dấu hiệu: Nút và link nhìn như text thường; rê chuột không phản hồi; tab bàn phím không thấy focus.
• Vì sao xấu: UI thiếu phản hồi khiến cảm giác “rẻ” và khó dùng.
• Cách sửa: Thêm hover tinh tế, và :focus-visible cho người dùng bàn phím.

a { text-decoration: none; }
a:hover { text-decoration: underline; }
button:focus-visible, a:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

10) Overuse !important và selector quá dài

• Dấu hiệu: CSS phải “đánh nhau” liên tục, sửa chỗ này hỏng chỗ kia, cuối cùng spam !important.
• Vì sao xấu: Code CSS rối là UI rối theo, vì bạn không kiểm soát được hệ thống style.
• Cách sửa: Giảm độ đặc hiệu (specificity), ưu tiên class đơn giản, tách component rõ ràng. Dùng CSS theo hướng “đặt quy tắc trước, override sau” có chủ đích.

/* Tệ: selector dài và khó override */
.page .content .sidebar .menu a.active { color: #000 !important; }

/* Tốt: class rõ ràng */
.menu-link { color: #333; }
.menu-link.is-active { color: #000; }

Kết luận: Muốn giao diện đẹp, hãy “ít nhưng chuẩn”

10 lỗi trên nghe đơn giản nhưng dính một cái là UI tuột mood liền. Nếu bạn mới học CSS, hãy ưu tiên 3 thứ: bố cục (Flex/Grid), typography (font-size + line-height), và tính nhất quán (spacing + màu). Làm tốt ba thứ đó, giao diện tự nhiên sẽ “đỡ quê” và nhìn chuyên nghiệp hẳn.