Login

CSS variables (custom properties): viết CSS dễ bảo trì hơn

  • author-image

    Nguyễn Đình Cường

  • blog-tag
  • blog-comment 0 comment
  • created-date 09 Nov, 2026
blog-thumbnail

Bạn đã bao giờ phải tìm và thay một mã màu xuất hiện ở ba mươi chỗ trong file CSS chưa? CSS variables, tên chính thức là custom properties, giải quyết chuyện đó. Chúng cho phép bạn khai báo một giá trị một lần và dùng lại ở mọi nơi, và còn làm được nhiều thứ hơn các biến của bộ tiền xử lý.

Khai báo và sử dụng

Tên biến bắt đầu bằng hai dấu gạch ngang. Thông thường bạn khai báo ở :root để biến dùng được trên toàn trang, rồi gọi bằng hàm var():

:root {
  --color-primary: #2563eb;
  --color-text: #1e293b;
  --space: 16px;
  --radius: 8px;
}

.button {
  background: var(--color-primary);
  padding: var(--space);
  border-radius: var(--radius);
}

Muốn đổi màu chủ đạo của cả website, bạn chỉ cần sửa một dòng. Hàm var() còn nhận giá trị dự phòng: var(--color-accent, #f59e0b) sẽ dùng màu vàng nếu biến chưa được định nghĩa.

Khác biệt với biến của Sass

Biến Sass được biên dịch thành giá trị cố định trước khi đến trình duyệt. CSS variables thì sống trong trình duyệt, nên chúng:

  • Kế thừa theo cây DOM như các thuộc tính CSS khác.
  • Có thể đổi giá trị theo ngữ cảnh, như theo media query hoặc theo class.
  • Có thể đọc và ghi bằng JavaScript.

Ghi đè theo phạm vi

Vì biến kế thừa, bạn có thể định nghĩa lại giá trị trong một khu vực riêng và mọi thứ bên trong tự đổi theo:

.card-danger {
  --color-primary: #dc2626;
}

Mọi nút dùng var(--color-primary) bên trong .card-danger sẽ thành màu đỏ, trong khi các nút bên ngoài giữ nguyên màu xanh. Đây là cơ chế rất mạnh để làm biến thể của một thành phần mà không phải viết lại quy tắc.

Làm giao diện sáng tối

Một ứng dụng nổi tiếng của biến là chế độ tối. Bạn định nghĩa bộ màu cho chế độ sáng, rồi định nghĩa lại cho chế độ tối:

:root {
  --bg: #ffffff;
  --text: #0f172a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --text: #e2e8f0;
  }
}

body {
  background: var(--bg);
  color: var(--text);
}

Phần còn lại của CSS không cần biết đang ở chế độ nào, vì nó chỉ dùng var(--bg) và var(--text). Nếu muốn có nút chuyển thủ công, bạn đặt thuộc tính như data-theme='dark' lên thẻ html và định nghĩa lại biến cho selector tương ứng.

Dùng với JavaScript

JavaScript có thể thay đổi biến để điều khiển giao diện mà không đụng đến từng phần tử:

document.documentElement.style.setProperty('--color-primary', '#16a34a');

const gia_tri = getComputedStyle(document.documentElement)
  .getPropertyValue('--color-primary');

Cách này hữu ích cho bộ chọn màu, thanh trượt cỡ chữ, hay hiệu ứng theo vị trí chuột, nơi một giá trị thay đổi liên tục ảnh hưởng nhiều thành phần.

Kết hợp với calc()

Biến có thể nằm trong calc(), ví dụ padding: calc(var(--space) * 2). Vì vậy bạn có thể xây một hệ thống khoảng cách chỉ từ một giá trị cơ sở, nhân lên khi cần.

Lưu ý khi dùng

  1. Đặt tên có ý nghĩa theo vai trò, như --color-primary, thay vì theo giá trị như --blue. Khi thương hiệu đổi màu, tên vẫn đúng.
  2. Đừng biến mọi giá trị thành biến. Chỉ nên làm với những thứ lặp lại hoặc có khả năng đổi.
  3. Biến không dùng được trong chuỗi media query như @media (min-width: var(--x)).
  4. Nếu biến không hoạt động, kiểm tra tên có đúng chính tả không và biến có nằm trong phạm vi kế thừa của phần tử không. Tab Computed trong DevTools giúp bạn xem giá trị cuối cùng.

Ví dụ: hệ thống nút bấm có biến thể

Để thấy sức mạnh của biến, hãy làm một thành phần nút với vài biến thể chỉ bằng cách đổi biến cục bộ:

.btn {
  --btn-bg: var(--color-primary);
  --btn-text: #ffffff;
  background: var(--btn-bg);
  color: var(--btn-text);
  padding: 10px 18px;
  border: 0;
  border-radius: var(--radius);
}
.btn-outline {
  --btn-bg: transparent;
  --btn-text: var(--color-primary);
  border: 1px solid var(--color-primary);
}

Mẫu này giữ phần khung nút ở một chỗ, còn từng biến thể chỉ khai báo những biến khác biệt. Khi muốn thêm nút nguy hiểm màu đỏ, bạn chỉ cần thêm vài dòng thay vì sao chép cả khối quy tắc. Cách tổ chức này là nền tảng của nhiều hệ thống thiết kế hiện nay.

Kết luận

CSS variables giúp mã gọn hơn, dễ đổi giao diện hơn và mở đường cho chế độ sáng tối hay nhiều chủ đề màu. Hãy bắt đầu bằng việc gom màu, khoảng cách và bo góc vào :root trong dự án tiếp theo của bạn.

Khi bạn muốn xây dựng hệ thống giao diện bài bản cho dự án thật, bạn có thể tham khảo thêm tại các khóa học của codebem.com.

author_photo
Nguyễn Đình Cường

0 comment