Biến CSS là gì?
Còn gọi: CSS variables, custom properties, css variables, css variable, custom properties, css custom properties
Biến CSS là giá trị được đặt tên một lần, ví dụ --color-primary: #e5322d, rồi dùng lại ở nhiều nơi bằng var(--color-primary); đổi giá trị ở một chỗ thì mọi nơi dùng nó cập nhật theo.
Hiểu kỹ hơn
Biến CSS là cách phổ biến để đưa design token vào code: màu, cỡ chữ, khoảng cách, bo góc, bóng đổ đều có thể là biến. Ví dụ làm giao diện tối chỉ cần định nghĩa lại các biến màu khi người dùng bật dark mode, không cần viết lại từng thành phần. Biến trong Figma (Variables) hoạt động theo cùng tinh thần: một biến màu có nhiều chế độ như Light và Dark. Khi tên biến trong Figma và trong code giống nhau, ví dụ cùng là color/text/primary, việc bàn giao và bảo trì nhẹ hơn rất nhiều. Lời khuyên: đặt tên theo vai trò (text-primary, surface, border) thay vì theo giá trị (red-500), để khi đổi màu thương hiệu không phải đổi tên.
