Bài 10: Tổ chức CSS – comment, reset, và đặt tên class hiệu quả

Viết CSS không chỉ là biết thuộc tính, mà còn phải viết có tổ chức, dễ đọc, dễ bảo trì.

Bài học này sẽ giúp bạn biết cách:

• Ghi chú (comment) trong CSS
• Sử dụng reset CSS để đảm bảo giao diện hiển thị đồng đều
• Đặt tên class rõ ràng, dễ hiểu, tuân thủ nguyên tắc lâu dài

Đây là bước chuẩn bị quan trọng trước khi bước vào phần CSS nâng cao.

---

1. Comment – ghi chú trong CSS

Khi viết CSS, bạn có thể chèn ghi chú để mô tả mục đích đoạn code:

📋 Copy/* Đây là phần định dạng cho tiêu đề chính */
h1 {
  font-size: 28px;
  color: #333;
}

• Ghi chú không ảnh hưởng đến giao diện
• Nên dùng để chia nhóm, mô tả rõ từng phần

Ví dụ tổ chức rõ ràng:

📋 Copy/* Reset mặc định */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Typography */
body {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

/* Layout chính */
.container {
  max-width: 1200px;
  margin: auto;
}

---

2. Reset CSS – xoá bỏ khoảng cách mặc định trình duyệt

Mỗi trình duyệt có kiểu mặc định khác nhau (ví dụ: body có margin, ul có padding…).

Reset CSS giúp giao diện hiển thị đồng nhất ở mọi trình duyệt.

a. Reset đơn giản:

📋 Copy* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

→ Xoá toàn bộ khoảng cách mặc định, đồng thời dùng box-sizing: border-box để dễ tính toán kích thước.

b. Hoặc dùng reset nâng cao (Normalize.css, Eric Meyer Reset…)

Khi làm dự án thật, bạn có thể dùng thư viện reset chuẩn. Ở giai đoạn cơ bản, chỉ cần reset như trên là đủ.

---

3. Đặt tên class – rõ ràng và có hệ thống

CSS không hiểu tiếng người – vì vậy đặt tên class tốt sẽ giúp bạn tự hiểu code của mình sau này (và giúp người khác đọc dễ dàng hơn nữa).

a. Đặt tên theo mục đích, không đặt lung tung

📋 Copy/* Không nên */
.div1 { ... }
.abc { ... }

/* Nên */
.header-logo { ... }
.main-button { ... }

b. Không nên dùng tiếng Việt hoặc từ viết tắt khó hiểu

• Tránh: .nutbam, .chuinh, .nd1
• Tốt hơn: .btn, .content, .section-title

c. Tuân theo cấu trúc: block–element–modifier (BEM) (nâng cao)

Ví dụ:

📋 Copy.card {}
.card__title {}
.card__image {}
.card--highlighted {}

• card: là khối chính
• __title: là thành phần trong khối
• --highlighted: là biến thể

Không bắt buộc dùng BEM, nhưng nên có một quy ước rõ ràng.

---

4. Cách tổ chức file CSS khi dự án lớn

Gợi ý:

📋 Copystyle.css            → CSS chính
reset.css            → Reset mặc định
components/
  button.css         → Style cho nút
  header.css         → Style cho phần header
  footer.css
layout/
  grid.css
  spacing.css

Ở cấp cơ bản, bạn có thể viết hết trong 1 file. Nhưng hãy học cách chia nhỏ khi làm dự án lớn.

---

5. Thực hành – viết CSS có tổ chức

style.css

📋 Copy/* Reset mặc định */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Kiểu chữ chung */
body {
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background: #fafafa;
  color: #333;
}

/* Tiêu đề chính */
.section-title {
  font-size: 24px;
  margin-bottom: 20px;
  text-align: center;
}

/* Nút bấm */
.btn {
  padding: 10px 20px;
  background: #03a9f4;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

---

6. Ghi nhớ

Thành phần	Tác dụng
/* comment */	Ghi chú code, chia nhóm rõ ràng
reset CSS	Xoá giá trị mặc định của trình duyệt
Tên class rõ ràng	Dễ đọc, dễ bảo trì
Quy tắc đặt tên	Dùng từ tiếng Anh, viết theo chức năng
BEM (nâng cao)	Cấu trúc đặt tên hệ thống cho dự án lớn