Nguyên Tắc Hoạt Động Cốt Lõi

CSS vận hành dựa trên ba cơ chế nền tảng: chồng chéo, kế thừa và độ ưu tiên. Hiểu rõ các nguyên tắc này giúp giải quyết xung đột style hiệu quả.

1. Chồng Chéo (Cascading)

Khi các bộ chọn giống nhau định nghĩa thuộc tính xung đột, trình duyệt áp dụng nguyên tắc "gần nhất thắng". Ví dụ:

.container {
  padding: 10px; /* Sẽ bị ghi đè */
}
.container {
  padding: 20px; /* Áp dụng do khai báo sau */
}

Lưu ý: Chỉ xảy ra khi có xung đột thuộc tính. Các style không xung đột sẽ được kết hợp.

2. Kế Thừa (Inheritance)

Element con tự động nhận một số thuộc tính từ element cha như color, font-family. Các thuộc tính thường được kế thừa:

• Nhóm font: font-size, font-weight
• Định dạng văn bản: line-height, text-align
• Màu sắc: color

Lưu ý quan trọng:

• Thẻ <a> không kế thừa color do trình duyệt áp dụng style mặc định
• Thẻ heading (h1-h6) không kế thừa font-size
• Chiều cao không được kế thừa, nhưng chiều rộng có hành vi tương tự

3. Độ Ưu Tiên (Specificity)

Khi nhiều bộ chọn nhắm đến cùng element, trình duyệt tính toán độ ưu tiên theo thứ tự:

1. Inline style (1000)
2. ID selector (100)
3. Class/attribute/pseudo-class (10)
4. Element/pseudo-element (1)

Ví dụ: #header .nav-item (100 + 10) thắng .active (10).

Kiểu Hiển Thị Element

Xử Lý Layout Thực Tế

Box Model Tối Ưu

Tránh hiện tượng "nở" box khi thêm padding/border:

.card {
  width: 300px;
  padding: 20px;
  border: 1px solid #ddd;
  box-sizing: border-box; /* Tự động trừ padding/border */
}

Clearfix Hiện Đại

Giải pháp xử lý float gây collapse layout:

.layout-container::after {
  content: "";
  display: table;
  clear: both;
}

Áp dụng cho container chứa element float để giữ nguyên chiều cao.

Canh Chỉnh Element Nội Tuyến

Khắc phục vấn đề căn chỉnh input/button không đồng bộ:

.search-group {
  display: flex; /* Hoặc dùng vertical-align */
}
.search-input,
.search-btn {
  vertical-align: middle;
}

Xử Lý Ảnh Responsive

Đảm bảo ảnh không vượt quá container:

img.responsive {
  max-width: 100%;
  height: auto;
}

Tính Năng CSS3 Hữu Ích

Transition Mượt Mà

.button {
  transition: all 0.3s ease;
}
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

Calc Cho Layout Động

.sidebar {
  width: calc(100% - 320px); /* Tính toán linh hoạt */
}

Hiệu Ứng Filter

.thumbnail:hover {
  filter: blur(2px) brightness(1.1);
}

Quy Tắc Đặt Tên CSS

Nguyên tắc đặt tên hiệu quả:

• Dùng tên tiếng Anh, viết thường, không dấu gạch dưới đầu
• Phân tầng rõ ràng: .product-card__title
• Tránh viết tắt trừ trường hợp rõ nghĩa (ex: btn)
• Các class phổ biến: container, grid, hidden