Có bao giờ bạn phát điên khi phải Ctrl+F và thay thế hàng chục lần chỉ để đổi một mã màu trong file CSS dài cả ngàn dòng chưa? Mình thì rồi, và đó là cơn ác mộng thực sự trong những năm đầu làm nghề.
May thay, CSS Custom Properties (hay biến CSS) ra đời như một vị cứu tinh. Tài liệu về CSS Variable custom properties hướng dẫn thực tế này sẽ giúp chúng ta viết code theo nguyên tắc DRY (Don’t Repeat Yourself). Nó làm cho việc bảo trì stylesheet trở nên gọn gàng, linh hoạt và dễ thở hơn bao giờ hết.
Biến CSS là gì và tại sao nó sẽ thay đổi cuộc chơi của bạn?
Biến CSS (hay thuộc tính tùy chỉnh) là các giá trị do lập trình viên định nghĩa để tái sử dụng nhiều lần trong stylesheet. Lợi ích của CSS custom properties nằm ở khả năng giảm lặp code, giúp mã nguồn dễ đọc và dễ bảo trì hơn gấp nhiều lần.
Trước đây, khi muốn đổi màu chủ đạo của một website, bạn phải tìm từng dòng code chứa mã hex #007bff để sửa. Bây giờ, biến CSS là gì đã không còn xa lạ, nó cho phép bạn lưu mã màu đó vào một “biến” duy nhất. Khi cần thay đổi, bạn chỉ việc cập nhật giá trị tại một nơi, và toàn bộ giao diện sẽ tự động đổi theo.
Với những ai đang Học HTML CSS cơ bản cho người mới bắt đầu, việc làm quen với biến CSS sớm sẽ giúp định hình tư duy viết code hiện đại. Tại Phạm Hải, chúng mình luôn yêu cầu các bạn thực tập sinh phải nắm vững khái niệm này ngay từ tuần đầu tiên. Nó không chỉ là một tính năng, mà là một bước tiến lớn giúp CSS trở thành một ngôn ngữ có tính logic cao hơn.
Cú pháp cơ bản: Khai báo và gọi biến trong 30 giây
Để khai báo, bạn dùng tiền tố -- (ví dụ: --main-color: blue;) và để gọi biến, bạn sử dụng hàm var() (ví dụ: color: var(--main-color);).
Cách sử dụng CSS custom properties thực sự rất trực quan. Bạn chỉ cần nhớ quy tắc “hai dấu gạch ngang”. Đây là một ví dụ cơ bản về CSS custom properties cho người mới bắt đầu:
:root {
--primary-color: #3498db;
--padding-standard: 16px;
}
.button {
background-color: var(--primary-color);
padding: var(--padding-standard);
}
Chỉ với vài dòng code, bạn đã thiết lập xong một nền tảng vững chắc. Hàm var() sẽ lấy giá trị được lưu trữ và đắp thẳng vào thuộc tính CSS tương ứng.
Phạm vi biến: Toàn cục (:root) và cục bộ – Đặt đâu cho đúng?
Phạm vi biến trong CSS được quyết định bởi nơi bạn khai báo nó. Khai báo trong selector :root tạo ra biến toàn cục, trong khi khai báo ở một class cụ thể sẽ tạo ra biến cục bộ chỉ áp dụng cho phần tử đó và con của nó.
Khi bạn khai báo biến trong selector :root, biến đó tương đương với thẻ <html> và có thể được truy cập từ bất kỳ đâu trong tài liệu. Đây là nơi hoàn hảo để lưu trữ các giá trị của hệ thống thiết kế như màu sắc thương hiệu hay font chữ.
Ngược lại, phạm vi biến CSS cục bộ lại cực kỳ hữu ích khi bạn xây dựng các component độc lập. Ví dụ, một .card có thể có --card-bg: white;. Biến này sẽ không ảnh hưởng đến các phần tử nằm ngoài .card, giúp tránh xung đột code trong các dự án lớn.
Kế thừa và Ghi đè: Sức mạnh của tầng tầng lớp lớp CSS
Tính kế thừa cho phép các phần tử con tự động nhận giá trị biến từ phần tử cha. Đồng thời, bạn có thể dễ dàng thực hiện ghi đè giá trị CSS custom properties bằng cách định nghĩa lại biến đó ở một selector cụ thể hơn.
Tính kế thừa của biến CSS hoạt động giống hệt như các thuộc tính CSS thông thường như color hay font-family. Nếu một thẻ <div> cha có --text-color: black;, mọi thẻ <p> bên trong nó cũng sẽ “hiểu” biến này trừ khi bị chặn lại.
Việc ghi đè CSS cũng diễn ra rất tự nhiên. Nếu bạn muốn một nút bấm đặc biệt có màu khác, bạn chỉ cần khai báo lại biến đó bên trong class của nút bấm:
.button-danger {
--primary-color: #e74c3c; /* Ghi đè giá trị màu xanh thành màu đỏ */
}
Giá trị dự phòng (Fallback): ‘Phương án B’ cứu cánh khi biến bị lỗi
Giá trị dự phòng CSS custom properties được thiết lập bằng cách thêm tham số thứ hai vào hàm var(). Nó giúp giao diện không bị vỡ nếu biến chính chưa được khai báo hoặc không hợp lệ.
Trong thực tế, đôi khi biến CSS có thể bị gõ sai tên hoặc chưa được tải kịp do lỗi mạng. Hàm var() cho phép bạn phòng hờ rủi ro này một cách thanh lịch:
.text {
color: var(--theme-color, #333333);
}
Nếu --theme-color không tồn tại, trình duyệt sẽ tự động sử dụng màu #333333. Kỹ thuật này đặc biệt quan trọng khi bạn viết các thư viện CSS để chia sẻ cho người khác dùng chung.
Ứng dụng thực tế: Từ chuyện nhỏ đến ‘làm nên chuyện lớn’ với CSS Variables
Ứng dụng thực tế CSS variables trải dài từ việc xây dựng hệ thống thiết kế nhất quán đến việc tạo ra các giao diện tương tác phức tạp. Nó biến một stylesheet tĩnh thành một hệ sinh thái CSS linh hoạt và thông minh.
Khi kết hợp với các kỹ thuật layout như Hướng dẫn CSS Flexbox từ A-Z có ví dụ, biến CSS giúp bạn kiểm soát toàn bộ khoảng cách và căn chỉnh chỉ qua một vài khai báo ở cấp độ cha. Hãy cùng đi sâu vào những use-case phổ biến nhất.
Tạo Dark Mode / Light Mode siêu tốc chỉ với vài dòng code
Bằng cách ghi đè các biến màu sắc dựa trên thuộc tính data-theme hoặc media query, bạn có thể tạo theme động với CSS variables cực kỳ nhanh chóng. Đây là cách chuẩn nhất để làm dark mode và light mode hiện nay.
Ngày xưa, để làm chủ đề động, chúng ta phải viết hai file CSS riêng biệt và dùng JavaScript để đổi file. Giờ đây, mọi thứ chỉ tóm gọn trong một cú pháp đơn giản:
:root {
--bg-color: #ffffff;
--text-color: #222222;
}
[data-theme="dark"] {
--bg-color: #121212;
--text-color: #f1f1f1;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
Chỉ cần thay đổi thuộc tính data-theme trên thẻ <html> bằng một dòng JS nhỏ, toàn bộ màu sắc của trang web sẽ chuyển đổi mượt mà.
Quản lý hệ thống Spacing và Font Size nhất quán cho cả dự án
Biến CSS đóng vai trò như một nguồn chân lý (source of truth) cho toàn bộ kích thước font, khoảng cách và kiểu chữ. Điều này giúp duy trì một hệ thống thiết kế đồng nhất từ đầu đến cuối dự án.
Thay vì hardcode các giá trị như margin: 15px hay padding: 20px rải rác khắp nơi, bạn nên gom chúng lại thành các biến như --space-sm, --space-md, --space-lg.
Điều này đặc biệt hữu ích khi thiết lập khoảng cách (gap) trong CSS Grid Layout toàn tập dễ hiểu. Bạn chỉ cần gọi gap: var(--space-md);, giao diện sẽ luôn đảm bảo sự thẳng hàng tăm tắp mà không sợ bị lệch pixel nào.
Thiết kế responsive linh hoạt hơn bằng cách thay đổi biến trong Media Queries
Thay vì viết lại toàn bộ block CSS, bạn chỉ cần cập nhật giá trị biến bên trong các media queries. Kỹ thuật này giúp responsive design trở nên gọn nhẹ và dễ kiểm soát hơn rất nhiều.
Đây là bí quyết cốt lõi khi Thiết kế responsive website với Media Query. Hãy xem ví dụ sau:
:root {
--container-width: 100%;
}
@media (min-width: 768px) {
:root {
--container-width: 720px;
}
}
Bạn không cần phải lặp lại class .container { width: ... } nhiều lần. Thuộc tính tùy chỉnh sẽ tự động điều chỉnh theo kích thước màn hình, giúp giảm thiểu đáng kể dung lượng file CSS.
Tương tác động: Thay đổi ‘cả thế giới’ chỉ với một dòng JavaScript
Thay đổi CSS variable bằng JavaScript thông qua phương thức style.setProperty() cho phép bạn thao tác trực tiếp với giao diện mà không cần thêm bớt class rườm rà. Nó tạo ra cầu nối hoàn hảo giữa logic JS và giao diện CSS.
DOM và CSSOM trong trình duyệt hiện đại (tính đến năm 2026) xử lý việc cập nhật biến CSS cực kỳ tối ưu. Khi bạn lấy tọa độ chuột từ JavaScript và truyền vào biến CSS, bạn có thể tạo ra các hiệu ứng hover 3D hoặc theo dõi con trỏ chuột rất ảo diệu:
document.documentElement.style.setProperty('--mouse-x', event.clientX + 'px');
Chỉ một dòng code này, CSS đã có thể nhận được dữ liệu thời gian thực từ thao tác người dùng.
Nâng cao tay nghề: So sánh và những ‘bí kíp’ không phải ai cũng biết
Để thực sự làm chủ và có thể tự tin viết một hướng dẫn toàn tập CSS custom properties, bạn cần phân biệt rõ nó với các công cụ cũ và biết cách tận dụng các tính năng CSS hiện đại như @property hay hàm tính toán.
Sass Variables vs CSS Custom Properties: Kẻ tám lạng, người nửa cân?
Khi so sánh CSS custom properties và Sass variables, điểm khác biệt cốt lõi là biến Sass xử lý ở thời gian biên dịch (compile-time), còn biến CSS hoạt động thực tế ở thời gian chạy (runtime) trên trình duyệt.
Nhiều bạn thắc mắc đã có bộ tiền xử lý CSS như Sass/SCSS rồi thì dùng biến CSS làm gì? Dưới đây là bảng so sánh nhanh dựa trên kinh nghiệm thực chiến của Phạm Hải:
| Tiêu chí | Biến Sass ($var) |
Biến CSS (--var) |
|---|---|---|
| Môi trường hoạt động | Thời gian biên dịch (Compile-time) | Thời gian chạy (Runtime) |
| Cập nhật bằng JS | Không thể | Hoàn toàn có thể |
| Tính kế thừa DOM | Không có (chỉ theo scope file SCSS) | Có (kế thừa theo cây DOM) |
Bạn hoàn toàn có thể kết hợp cả hai: Dùng Sass cho các logic vòng lặp phức tạp và dùng CSS Variables cho các giá trị cần thay đổi linh hoạt trên trình duyệt.
Dùng hàm calc() kết hợp với biến để tính toán giá trị động
Hàm calc() khi kết hợp với biến CSS cho phép thực hiện các phép toán nội suy ngay trên trình duyệt. Nó giúp giao diện tự động co giãn tỷ lệ mà không cần viết thêm mã thừa.
Ví dụ, bạn muốn tạo một padding luôn bằng một nửa so với khoảng cách chuẩn. Thay vì tạo thêm một biến mới, bạn chỉ cần làm thế này:
.box {
padding: calc(var(--space-md) / 2);
}
Sự kết hợp này mang lại sức mạnh tính toán tuyệt vời, giúp các thành phần UI tự động thích ứng với nhau một cách hoàn hảo.
Khám phá @property: Cho phép trình duyệt ‘hiểu’ biến của bạn
Cú pháp @property at-rule cho phép định nghĩa kiểu dữ liệu (syntax) và giá trị khởi tạo cho biến CSS. Nó tối ưu hóa hiệu suất render và cho phép animate các thuộc tính phức tạp một cách mượt mà.
Tính đến năm 2026, @property đã được hỗ trợ 100% trên tất cả các trình duyệt hiện đại (Baseline). Khi bạn đăng ký một biến với inherits: false, trình duyệt sẽ không phải tính toán lại toàn bộ cây DOM mỗi khi biến đó thay đổi, giúp cải thiện hiệu suất rõ rệt.
Nó là chìa khóa để Tạo animation CSS đẹp không cần JavaScript cho các thuộc tính phức tạp như gradient. Khi trình duyệt biết --gradient-angle là một góc (<angle>), nó có thể tạo hiệu ứng xoay (transition) mượt mà thay vì chuyển đổi giật cục.
@property --gradient-angle {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
Chung quy lại, việc sử dụng CSS Custom Properties không chỉ là một kỹ thuật mới mà là một sự thay đổi trong tư duy viết code: hướng tới sự module hóa, dễ dàng mở rộng và bảo trì. Đừng ngần ngại, hãy bắt đầu áp dụng nó ngay từ dự án nhỏ nhất của bạn, và mình tin rằng bạn sẽ không muốn quay lại cách viết CSS kiểu cũ nữa đâu.
Bạn đã dùng CSS Variables vào dự án nào ‘chất’ chưa? Chia sẻ ngay ở phần bình luận để anh em cùng học hỏi nhé!
Lưu ý: Các thông tin trong bài viết này chỉ mang tính chất tham khảo. Để có được lời khuyên tốt nhất, vui lòng liên hệ trực tiếp với chúng tôi để được tư vấn cụ thể dựa trên nhu cầu thực tế của bạn.
