Bạn sẽ gom một số giá trị lặp như màu, khoảng cách và bo góc thành custom properties, đồng thời tổ chức quy tắc theo vai trò để tránh sửa một chỗ làm nhiều nơi lệch nhau.

Dùng tiếp website Góc học web từ môn HTML. Mỗi thư mục ví dụ là một phiên bản độc lập: before.html và before.css để so sánh, index.html và styles.css là kết quả sau bài học. Hãy sửa một quy tắc, tải lại và giải thích điều thay đổi.

Nhận ra các giá trị lặp có cùng ý nghĩa

Nếu nhiều nút dùng chung một màu nhấn, việc sửa từng mã ở nhiều chỗ dễ bỏ sót. Custom property như –color-accent giúp đặt tên cho giá trị theo vai trò. Không phải mọi số giống nhau đều bắt buộc dùng chung biến: hai giá trị bằng nhau hôm nay có thể phục vụ hai mục đích khác nhau.

Trong CSS, tên custom property phân biệt chữ hoa/thường. –Color và –color không phải một biến. Hãy chọn quy ước tên nhất quán để người sửa đọc được mục đích.

Phạm vi, kế thừa và fallback

Đặt biến trên :root để dùng rộng, hoặc trên một thành phần để tạo phạm vi hẹp hơn. Các custom properties thông thường được thừa kế, nên một vùng có thể thay giá trị cho con của nó. var(–color-accent,#175f82) có fallback khi biến không có giá trị dùng được theo cơ chế của var; nó không phải công cụ sửa mọi giá trị sai kiểu ở bước tính toán.

Một chuỗi trong biến có thể hợp lệ ở nơi khai báo nhưng không hợp lệ cho thuộc tính sử dụng nó. Ví dụ gán một độ dài vào biến rồi dùng ở color không tự tạo ra màu dự phòng như bạn tưởng. Hãy xem Computed khi kết quả bất ngờ.

Tổ chức theo các tầng trách nhiệm

Một tệp nhỏ có thể chia phần nền tảng, typography, layout, component và điều chỉnh theo điều kiện. Tránh mỗi bài thêm một selector có độ đặc hiệu cao hơn để sửa một giá trị cũ ở nơi khác. Khi hoàn thiện, hợp nhất quy tắc và xóa lặp có chủ đích sau khi kiểm tra.

Tên class nên phản ánh thành phần hoặc vai trò. Quy tắc .site-nav a đọc được hơn một chuỗi rất dài buộc vào mọi tầng HTML. Với dự án lớn có thể học thêm cascade layers và quy ước kiến trúc, nhưng không cần kéo độ phức tạp đó vào website ba trang ngay lập tức.

Dùng biến để thử thay đổi có kiểm soát

Ví dụ chuyển các thành phần nhấn sang dùng cùng –color-accent. Đổi một giá trị để quan sát các thành phần liên quan. Nếu một thành phần không đổi, kiểm tra nó có thật sự dùng biến hoặc đang bị một khai báo khác thắng.

Bộ phiên bản bài học giữ lịch sử CSS để so sánh. Ở bài cuối, stylesheet hoàn chỉnh sẽ được gọn lại thay vì để mọi ghi đè thí nghiệm trở thành mã bắt buộc cho sản phẩm.

Mã của phần đang học

Giữ lại cấu trúc HTML có ý nghĩa. Đoạn dưới là phần HTML liên quan đến tình huống; bộ tải về có cả tài liệu hoàn chỉnh và stylesheet tích lũy từ các bài trước.

<div class="theme-sample"><strong>Một màu nhấn dùng chung</strong><p>Thay --color-accent ở :root rồi đối chiếu vùng này và các nút.</p></div>

Thêm hoặc sửa trong styles.css

:root { --color-accent: #175f82; --color-ink: #203047; --color-border: #cbd8e5; --radius: .65rem; --space: 1rem; }
body { color: var(--color-ink); }
.button, .contact-form button { background: var(--color-accent); }
.card { border-color: var(--color-border); border-radius: var(--radius); }
.theme-sample { padding: var(--space); border: 2px solid var(--color-accent); border-radius: var(--radius); }
.theme-sample strong { color: var(--color-accent); }

So sánh trước và sau

Các thành phần tham chiếu cùng biến màu thay đổi nhất quán khi sửa biến. Không phải mọi màu nền hoặc màu lỗi được ép dùng chung màu nhấn, vì chúng có vai trò khác.

Xem trước khi sửa · Xem sau khi sửa · Tải 20 phiên bản và website hoàn chỉnh

Lỗi thường gặp và cách sửa

• Đặt một biến cho mọi giá trị bằng nhau: nhóm theo ý nghĩa.
• Sai chữ hoa/thường trong tên biến: đối chiếu chính xác.
• Tưởng var fallback bắt mọi sai kiểu: kiểm tra computed value.

Tự kiểm tra

• Đổi biến màu và liệt kê thành phần nào nên đổi, thành phần nào không nên.
• Gom một nhóm quy tắc mà không tăng specificity và kiểm tra lại.

Những điều cần nhớ

Đối chiếu kết quả với mục tiêu của bài, không chỉ nhìn xem giao diện có giống ảnh mẫu. Dùng DevTools kiểm tra quy tắc thực sự được áp dụng và thử một nội dung dài hơn hoặc khung nhìn hẹp hơn trước khi kết luận đã xong.

Đọc thêm khi cần

Tài liệu gốc về chủ đề này trên MDN

Mục lục CSS 20 bài · Ôn lại HTML