1. Utility-first: Viết bằng class nhỏ, tái sử dụng cao

Đây là phong cách phổ biến hiện nay nhờ các framework như Tailwind CSS. Bạn viết class rất ngắn gọn và mô tả trực tiếp style:

<button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
  Gửi
</button>

• Ưu điểm: Viết nhanh, ít cần tạo file CSS riêng, dễ tái sử dụng từng style nhỏ.
• Nhược điểm: HTML bị “nặng class”, khó đọc nếu chưa quen. Thiếu tính ngữ nghĩa nếu không đặt tên khéo.

Tip: Nên dùng kèm @apply để gom nhóm các utility class thành component class nếu dùng Tailwind.

2. BEM: Block – Element – Modifier

BEM giúp tổ chức CSS logic và dễ đọc:

.form {}
.form__label {}
.form__input {}
.form__input--error {}

HTML đi kèm:

<div class="form">
  <label class="form__label">Email</label>
  <input class="form__input form__input--error">
</div>

• Ưu điểm: Có cấu trúc rõ ràng, dễ maintain dự án lớn.
• Nhược điểm: Tốn thời gian viết tên class dài, khó tái sử dụng từng phần nhỏ.

3. Hybrid: Kết hợp Utility + BEM

Nhiều dev hiện đại dùng cách kết hợp smart utility và BEM. Ví dụ: BEM cho cấu trúc chính, còn utility để chỉnh padding, margin, màu…:

<div class="card p-4 rounded-lg shadow-md">
  <h2 class="card__title text-xl font-semibold">Tiêu đề</h2>
  <p class="card__desc text-gray-600">Mô tả...</p>
</div>

CSS chỉ cần khai báo phần logic liên quan tới bố cục:

.card__title {
  line-height: 1.4;
}

• Ưu điểm: Dễ maintain, tối ưu performance và tổ chức hợp lý hơn.
• Nhược điểm: Cần quy định nội bộ rõ ràng tránh loạn naming.

4. Gợi ý khi nào nên dùng cách nào?

5. Tổng kết

Không có “phong cách đúng tuyệt đối” – hãy chọn theo dự án và năng lực team. Nếu bạn cần tốc độ, chọn utility. Nếu bạn cần cấu trúc rõ ràng và lâu dài, BEM hoặc Hybrid là lựa chọn hợp lý.