Nếu bạn đang đề cập đến chuẩn đặt tên trong CSS, thì có một số quy tắc phổ biến giúp code gọn gàng, dễ đọc và dễ bảo trì. Dưới đây là các quy tắc đặt tên CSS theo chuẩn BEM, SMACSS, hoặc OOCSS, cùng một số ví dụ thực tế.
1. Chuẩn BEM (Block - Element - Modifier)
BEM (Block-Element-Modifier) là một phương pháp đặt tên phổ biến giúp CSS có cấu trúc rõ ràng, dễ mở rộng.
Cấu trúc đặt tên:
.block { }
.block__element { }
.block--modifier { }
🔹 Block: Thành phần độc lập trong giao diện
🔹 Element: Một phần tử con bên trong block
🔹 Modifier: Biến thể của block hoặc element
Ví dụ BEM:
/* Block */
.button { background-color: blue; color: white; padding: 10px 20px; }
/* Element */
.button__icon { margin-right: 5px; } /* Modifier */ .button--large { padding: 15px 30px; }
HTML sử dụng BEM:
<button class="button button--large"> <span class="button__icon">🔍</span> Tìm kiếm </button>
2. Chuẩn SMACSS (Scalable and Modular Architecture for CSS)
SMACSS chia CSS thành 5 nhóm chính:
-
Base – Quy tắc mặc định cho HTML (html, body, p, h1, h2)
-
Layout – Chia bố cục trang (header, sidebar, footer)
-
Module – Thành phần tái sử dụng (.card, .button)
-
State – Các trạng thái (.is-active, .is-hidden)
-
Theme – Chủ đề màu sắc (.theme-dark, .theme-light)
Ví dụ SMACSS:
/* Base */
body {
font-family: Arial, sans-serif;
}
/* Layout */
.header {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Module */
.card {
border: 1px solid #ddd;
padding: 20px;
}
/* State */
.is-hidden {
display: none;
}
/* Theme */
.theme-dark {
background-color: black;
color: white;
}
3. Chuẩn OOCSS (Object-Oriented CSS)
OOCSS tập trung vào:
Ví dụ OOCSS:
/* Structure */
.card {
border: 1px solid #ddd;
padding: 20px;
}
/* Skin (Kiểu dáng) */
.card--primary {
background-color: blue;
color: white;
}
HTML sử dụng OOCSS:
<div class="card card--primary">
Nội dung thẻ
</div>
4. Quy Tắc Chung Khi Đặt Tên CSS
✅ Sử dụng chữ thường và gạch ngang (-)
.header-menu { } /* ✅ Đúng */
.headerMenu { } /* ❌ Sai */
✅ Tránh dùng ID (#id) trong CSS
✅ Tránh dùng từ khóa chung chung (.box, .container)
✅ Dùng tiền tố để tránh xung đột
.mk-header { } /* Minh Khang */
.hbt-button { } /* HBT Pool */
Tóm Tắt
-
BEM: .block__element--modifier
-
SMACSS: .layout, .module, .state
-
OOCSS: Tách biệt cấu trúc & giao diện
Khi có nhiều thành phần con trong một phần tử cha, bạn có thể áp dụng các phương pháp BEM, SMACSS hoặc OOCSS để tổ chức CSS một cách rõ ràng. Dưới đây là ví dụ thực tế về một card sản phẩm có nhiều thành phần con như hình ảnh, tiêu đề, mô tả và nút bấm.
1. Áp Dụng Chuẩn BEM (Block - Element - Modifier)
BEM giúp phân cấp rõ ràng giữa Block, Element, và Modifier, tránh xung đột tên class.
Cấu trúc HTML (BEM)
<div class="product-card product-card--featured">
<img src="product.jpg" alt="Sản phẩm" class="product-card__image" />
<h2 class="product-card__title">Sản phẩm A</h2>
<p class="product-card__description">Mô tả sản phẩm A</p>
<button class="product-card__button product-card__button--buy">Mua ngay</button>
</div>
CSS theo BEM
/* Block */
.product-card { border: 1px solid #ddd; padding: 20px; text-align: center; }
/* Modifier */
.product-card--featured { border-color: gold; background-color: #fffbe6; }
/* Elements */
.product-card__image { max-width: 100%; }
.product-card__title { font-size: 1.5em; }
.product-card__description { font-size: 1em; color: #666; }
/* Button */
.product-card__button { padding: 10px 20px; border: none; cursor: pointer; }
.product-card__button--buy { background-color: green; color: white; }
2. Áp Dụng Chuẩn SMACSS (Scalable and Modular Architecture for CSS)
SMACSS chia các thành phần thành Layout, Module, State, Theme.
Cấu trúc HTML (SMACSS)
<div class="layout-card is-highlighted">
<img src="product.jpg" alt="Sản phẩm" class="module-image" />
<h2 class="module-title">Sản phẩm A</h2>
<p class="module-description">Mô tả sản phẩm</p>
<button class="module-button state-active">Mua ngay</button>
</div>
CSS theo SMACSS
/* Base Styles */
body { font-family: Arial, sans-serif; }
/* Layout */
.layout-card { border: 1px solid #ddd; padding: 20px; text-align: center; }
/* Module */
.module-image { max-width: 100%; }
.module-title { font-size: 1.5em; }
.module-description { color: #666; }
/* State */
.is-highlighted { border-color: gold; background-color: #fffbe6; }
.state-active { background-color: green; color: white; }
3. Áp Dụng Chuẩn OOCSS (Object-Oriented CSS)
OOCSS tách biệt bố cục và giao diện, giúp tái sử dụng CSS dễ dàng.
Cấu trúc HTML (OOCSS)
<div class="card card--highlighted">
<img src="product.jpg" alt="Sản phẩm" class="media media--responsive" />
<h2 class="text text--title">Sản phẩm A</h2>
<p class="text text--description">Mô tả sản phẩm</p>
<button class="button button--primary">Mua ngay</button>
</div>
CSS theo OOCSS
/* Cấu trúc chung (Structure) */
.card { border: 1px solid #ddd; padding: 20px; text-align: center; }
.media { max-width: 100%; } .text { font-family: Arial, sans-serif; }
/* Giao diện (Skin) */
.card--highlighted { border-color: gold; background-color: #fffbe6; }
.text--title { font-size: 1.5em; }
.text--description { color: #666; }
.button { padding: 10px 20px; border: none; cursor: pointer; }
.button--primary { background-color: green; color: white; }
So Sánh Các Cách Tiếp Cận
| Tiêu chí |
BEM |
SMACSS |
OOCSS |
| Cấu trúc rõ ràng |
✅ Rất tốt |
✅ Tốt |
✅ Tốt |
| Tái sử dụng |
✅ Khá tốt |
✅ Tốt |
✅ Rất tốt |
| Dễ bảo trì |
✅ Dễ mở rộng |
✅ Phù hợp dự án lớn |
✅ Giảm trùng lặp CSS |
| Độ dài tên class |
❌ Hơi dài |
✅ Tương đối ngắn |
✅ Ngắn gọn |
Nên chọn phương pháp nào?
-
Dự án nhỏ → OOCSS giúp tái sử dụng tốt.
-
Dự án lớn, dễ mở rộng → BEM hoặc SMACSS giúp quản lý dễ dàng.
-
Dự án cần linh hoạt, dễ bảo trì → SMACSS là lựa chọn hợp lý.
Bạn thích phương pháp nào nhất? 🚀
