Khi dự án lớn lên, CSS thuần gặp vấn đề với phạm vi toàn cục (global scope) — mọi selector cạnh tranh toàn cục, các cuộc chiến specificity nổ ra, và không ai dám xóa một rule. Các phương pháp luận áp đặt cấu trúc và quy ước đặt tên để giữ CSS dễ bảo trì.
Một quy ước đặt tên làm cho các mối quan hệ trở nên tường minh và giữ specificity phẳng (tất cả đều là class đơn):
{ }
{ }
{ }
{ }
<div class="card card--featured">
<h2 class="card__title">...</h2>
</div>
Giá trị của BEM: tên class tự mô tả, được scope theo quy ước, và đồng nhất specificity thấp (không có cuộc chiến lồng nhau/id).
Kết hợp style từ các class nhỏ chỉ một mục đích trực tiếp trong markup:
<div class="flex items-center gap-4 p-6 rounded-lg shadow">...</div>
Ưu điểm: không cần đặt tên, không có CSS thừa (được purge), design token nhất quán. Nhược điểm: HTML dài dòng. Cực kỳ phổ biến nhờ tốc độ và tính nhất quán.
Cách tiếp cận hiện đại trong các framework component — scope style cho một component để chúng không thể rò rỉ:
import styles from "./Card.module.css"; // tên class được hash/cục bộ hóa
<div className={styles.card}>...</div> // → .Card_card__a1b2 (duy nhất)
Điều này giải quyết vấn đề global-scope một cách cơ học thay vì bằng quy ước.
OOCSS — tách structure khỏi skin, tái sử dụng object
SMACSS — phân loại rule (base, layout, module, state, theme)
ITCSS — phân lớp CSS theo specificity (generic → explicit), thấp đến cao
Tất cả đều chống lại cùng những kẻ thù: specificity creep, xung đột tên, dead code, và cascade khó đoán. Dù qua đặt tên (BEM), utility (Tailwind), hay scoping (Modules), chúng giữ CSS dễ đoán và an toàn để thay đổi ở quy mô lớn.
Các codebase CSS lớn sụp đổ dưới global scope và các cuộc chiến specificity nếu thiếu kỷ luật.
Chọn và áp dụng nhất quán một phương pháp luận (ngày nay thường là BEM, Tailwind, hoặc scoped CSS Modules) là điều giữ cho style được module hóa, dễ xóa, và không xung đột khi đội ngũ và codebase phát triển.