Class Selector chọn element dựa trên attribute class. Cú pháp: .classname. Một element có thể có nhiều class (cách nhau space).
Cơ bản
.black {
color: #808000; /* olive */
}
Áp dụng cho **mọi element** có class="black".
Chỉ định tag cụ thể
h1.black {
color: #808000;
}
Chỉ áp dụng cho <h1 class="black">. Specificity: (0, 0, 1, 1) = 11 (Class + Type).
Nhiều class trên một element (Multi-class)
<p class="center bold"> Đoạn này styled bởi cả .center VÀ .bold. </p>
.center { text-align: center; }
.bold { font-weight: bold; }
Đặc điểm
- Specificity:
(0, 0, 1, 0)= 10. Trung bình, dễ override và combine. - Reusable: Một class dùng cho nhiều element, nhiều tag.
- Nền tảng của methodology: BEM, OOCSS, SMACSS, Utility-first (Tailwind).
Best practice
- Đặt tên class theo **ngữ nghĩa (semantic)**:
.btn-primary,.card-titlethay vì.red-text,.mt-10(trừ utility-first). - Tránh over-qualifying:
div.card→ chỉ.card(trừ khi cần specificity). - Kết hợp multi-class thay vì tạo class con:
.btn .btn-primary→.btn.btn-primary(hoặc.btn--primaryBEM).