| name | html-css-css-architecture |
| description | null |
CSS Architecture
Category: html-css · Status: 🟢 Active
When to use
Khi tổ chức CSS cho dự án lớn, đặt tên class, kiểm soát scope.
Steps
- Chọn 1 phương pháp nhất quán: BEM, utility-first, hoặc CSS Modules — không trộn lẫn tùy hứng.
- BEM:
block__element--modifier; utility: class nhỏ đơn nhiệm; Modules: scope tự động.
- Đặt tên theo ý nghĩa, không theo hình thức (
.card__title thay .red-text).
- Giữ specificity thấp và phẳng; tránh selector lồng sâu (>3 cấp).
- Tuyệt đối tránh
!important; nếu cần, sửa nguồn gốc specificity.
- Tách token (color/space/typography) ra biến CSS dùng chung.
Template
.card { padding: var(--space-4); }
.card__title { font-weight: 600; }
.card--featured { border: 2px solid var(--color-accent); }
.button { background: var(--color-primary); }
Example
Good: BEM nhất quán, specificity phẳng, token hóa, không !important.
Avoid: .red-text, selector div > ul li a span, !important để đè style.
Checklist