Nhiều developer đang bắt đầu sử dụng CSS variables (biến trong CSS), hay được biết đến với tên gọi đúng hơn là CSS custom properties. CSS custom properties mang lại 1 số lợi ích rõ ràng hơn là CSS preprocessor variables (biến trong các CSS preprocessor như LESS hoặc SASS).

Vậy chúng ta hãy cùng đi tìm hiểu những lợi ích mà CSS custom properties mang lại là gì, cùng với một số tính năng và thủ thuật ít được biết đến trong khi sử dụng chúng.

Lợi ích của CSS Variables

Nó là Native

Điều này là hiển nhiên nhưng khá là quan trọng. Tức là bạn có thể sử dụng variables trong CSS mà không cần bất kỳ CSS preprocessor nào.

Các công cụ xung quanh phục vụ cho CSS đang phát triển khá là phức tạp trong những năm gần đây, tuy nhiên từ bây giờ chúng ta có thể dần dần đơn giản hóa việc đó thông qua những tính năng mới mà CSS Native có được (tức là CSS custom properties sẽ dần thay thế cho variables trong LESS hoặc SASS)

Nó là Live

CSS preprocessor variables thật sự không tồn tại trong trình duyệt. Biến mà chúng ta viết trong SASS hoặc LESS cuối cùng rồi cũng sẽ phải biên dịch ra CSS thông thường để cho trình duyệt hiểu. Chúng ta sẽ không thể định nghĩa lại được, tác động lại được thứ gọi là biến trong CSS bằng media queries hay JavaScript nếu sử dụng CSS Preprocessor variables, thay vào đó CSS custom properties lại làm được điều đó.

Điều này cũng có nghĩa rằng là tất cả các biểu thức sử dụng biến và những mệnh lệnh tính toán mà sử dụng CSS custom properties sẽ được tính toán lại khi biến đó được định nghĩa lại.

Dưới đây là 1 ví dụ về việc sử dụng media queries để định nghĩa lại giá trị của biến, từ đó các tính toán được thay đổi theo:

:root {
    --grid-gutter: 1rem;
}

@media (min-width: 600px) {
    :root {
        --grid-gutter: 1.25rem;
    }
}

.grid {
    display: grid;
    grid-gap: var(--grid-gutter);
    margin-left: calc(-1 * var(--grid-gutter));
    margin-right: calc(-1 * var(--grid-gutter));
}

Nó là Cascade

Khi mà CSS preprocessor variables không thể chạy trong trình duyệt và cũng không thể tương tác với markup, nó cũng không có sự hiểu biết về DOM. Chính vì vậy mà nó không thể scope trên DOM elements.

Mặc khác CSS custom properties lại có sự hiểu biết về DOM. CSS custom properties có thể scope trên các elements đặc biệt hoặc các class trên các elements

Một trường hợp sử dụng rõ ràng cho tính năng này là ví dụ về chuyển đổi chủ đề (theme switching):

:root {
    --body-background-color: white;
    --body-text-color: black;
}

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

.dark {
    --body-background-color: black;
    --body-text-color: white;
}

Nó Work Anywhere

CSS preprocessor variables không work trong CSS thuần hoặc với các preprocessors khác vì vậy khả năng chia sẻ bị giới hạn.

Bởi CSS custom properties là native, nên nó có thể được sử dụng với bất kỳ preprocessor nào và có thể được truy vấn và định nghĩa qua JavaScript.

Đây là 1 ví dụ về việc sử dụng JavaScript để tác động thay đổi giá trị của CSS variables

Định nghĩa lại các thuộc tính trong Media Queries

Hãy ghi nhớ rằng custom properties có thể được định nghĩa lại trong media queries. Margins, padding hay khoảng cách lưới là những trường hợp dễ áp dụng tính năng này.

Tưởng tượng rằng các khoảng cách padding, margin trên layout web ở mobile hẹp hơn, và trên tablet thì lớn hơn 1 chút, và trên desktop thì lại rộng hơn thêm nữa. Điều này được xử lý hoàn toàn đơn giản với custom properties.

Thay vì chúng ta đi định nghĩa lại từng khoảng cách trên element, chỉ cần định nghĩa lại custom properties trong media queries:

:root {
    --card-padding: 1rem;
}

@media (min-width: 600px) {
    :root {
        --card-padding: 1.25rem;
    }
}

@media (min-width: 1000px) {
    :root {
        --card-padding: 1.5rem;
    }
}

.card {
    padding: var(--card-padding);
}

Tổng kết

Qua những ví dụ trên chúng ta cũng đã thấy rằng CSS Variables sẽ là tương lai, sẽ là thứ thay thế dần dần cho CSS preprocessor variables và làm cho CSS ngày càng power hơn bao giờ hết.

Nguồn tham khảo: https://jonathan-harrell.com/unlocking-benefits-css-variables/