CSS Custom Properties: Các trường hợp sử dụng nâng cao để tạo kiểu động

CSS Custom Properties, còn được gọi là CSS variables, đã cách mạng hóa cách chúng ta viết và duy trì biểu định kiểu. Chúng cung cấp một cách mạnh mẽ để xác định các giá trị có thể tái sử dụng, tạo các chủ đề động và thực hiện các tính toán phức tạp trực tiếp trong CSS. Mặc dù cách sử dụng cơ bản đã được ghi lại đầy đủ, hướng dẫn này đi sâu vào các kỹ thuật nâng cao có thể cải thiện đáng kể quy trình phát triển front-end của bạn. Chúng ta sẽ khám phá các ví dụ thực tế và cung cấp thông tin chi tiết hữu ích để giúp bạn tận dụng tối đa tiềm năng của CSS Custom Properties.

Tìm hiểu về CSS Custom Properties

Trước khi đi sâu vào các trường hợp sử dụng nâng cao, hãy tóm tắt ngắn gọn các nguyên tắc cơ bản:

• Khai báo: Custom properties được khai báo bằng cú pháp --*, ví dụ: --primary-color: #007bff;.
• Cách sử dụng: Chúng được truy cập bằng hàm var(), chẳng hạn như color: var(--primary-color);.
• Phạm vi: Custom properties tuân theo các quy tắc xếp tầng và kế thừa, cho phép các biến thể theo ngữ cảnh.

Các trường hợp sử dụng nâng cao

1. Tạo chủ đề động

Một trong những trường hợp sử dụng hấp dẫn nhất của CSS Custom Properties là tạo các chủ đề động. Thay vì duy trì nhiều biểu định kiểu cho các chủ đề khác nhau (ví dụ: sáng và tối), bạn có thể xác định các giá trị dành riêng cho chủ đề làm custom properties và chuyển đổi giữa chúng bằng JavaScript hoặc CSS media queries.

Ví dụ: Chuyển đổi chủ đề sáng và tối

Đây là một ví dụ đơn giản về cách triển khai chuyển đổi chủ đề sáng và tối bằng CSS Custom Properties và JavaScript:

CSS:

            
:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --link-color: #007bff;
}

[data-theme="dark"] {
  --bg-color: #333333;
  --text-color: #ffffff;
  --link-color: #66b3ff;
}

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

a {
  color: var(--link-color);
}

            

              
                Copy
              
            
          

HTML:

            
<button id="theme-toggle">Toggle Theme</button>
<div class="content">
  <h1>My Website</h1>
  <p>Some content here.</p>
  <a href="#">A link</a>
</div>

            

              
                Copy
              
            
          

JavaScript:

            
const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

themeToggle.addEventListener('click', () => {
  if (body.dataset.theme === 'dark') {
    body.dataset.theme = 'light';
  } else {
    body.dataset.theme = 'dark';
  }
});

            

              
                Copy
              
            
          

Trong ví dụ này, chúng ta xác định các giá trị mặc định cho màu nền, màu văn bản và màu liên kết trong pseudo-class :root. Khi thuộc tính data-theme trên phần tử body được đặt thành "dark", các giá trị custom property tương ứng sẽ được áp dụng, chuyển sang chủ đề tối một cách hiệu quả.

Phương pháp này có tính bảo trì cao, vì bạn chỉ cần cập nhật các giá trị custom property để thay đổi giao diện của chủ đề. Nó cũng cho phép các kịch bản tạo chủ đề phức tạp hơn, chẳng hạn như hỗ trợ nhiều bảng phối màu hoặc các chủ đề do người dùng xác định.

Những cân nhắc toàn cầu khi tạo chủ đề

Khi thiết kế các chủ đề cho đối tượng toàn cầu, hãy cân nhắc:

• Tâm lý học màu sắc: Các màu sắc khác nhau có những ý nghĩa khác nhau trong các nền văn hóa khác nhau. Nghiên cứu ý nghĩa văn hóa của màu sắc trước khi chọn một bảng màu. Ví dụ: màu trắng tượng trưng cho sự tinh khiết trong nhiều nền văn hóa phương Tây nhưng lại gắn liền với sự tang tóc ở một số nền văn hóa châu Á.
• Khả năng tiếp cận: Đảm bảo rằng các chủ đề của bạn cung cấp đủ độ tương phản cho người dùng khiếm thị. Sử dụng các công cụ như WebAIM Contrast Checker để xác minh tỷ lệ tương phản.
• Địa phương hóa: Nếu trang web của bạn hỗ trợ nhiều ngôn ngữ, hãy xem xét cách chủ đề tương tác với các hướng văn bản khác nhau (ví dụ: các ngôn ngữ viết từ phải sang trái như tiếng Ả Rập và tiếng Do Thái).

2. Thiết kế đáp ứng với Custom Properties

CSS Custom Properties có thể đơn giản hóa thiết kế đáp ứng bằng cách cho phép bạn xác định các giá trị khác nhau cho các kích thước màn hình khác nhau. Thay vì lặp lại các media queries trong biểu định kiểu của bạn, bạn có thể cập nhật một vài custom properties ở cấp gốc và các thay đổi sẽ xếp tầng xuống tất cả các phần tử sử dụng các thuộc tính đó.

Ví dụ: Kích thước phông chữ đáp ứng

Đây là cách bạn có thể triển khai kích thước phông chữ đáp ứng bằng CSS Custom Properties:

            
:root {
  --base-font-size: 16px;
}

h1 {
  font-size: calc(var(--base-font-size) * 2);
}

p {
  font-size: var(--base-font-size);
}

@media (max-width: 768px) {
  :root {
    --base-font-size: 14px;
  }
}

@media (max-width: 480px) {
  :root {
    --base-font-size: 12px;
  }
}

            

              
                Copy
              
            
          

Trong ví dụ này, chúng ta xác định một custom property --base-font-size và sử dụng nó để tính kích thước phông chữ cho các phần tử khác nhau. Khi chiều rộng màn hình nhỏ hơn 768px, --base-font-size được cập nhật thành 14px và kích thước phông chữ của tất cả các phần tử phụ thuộc vào nó sẽ tự động được điều chỉnh. Tương tự, đối với màn hình nhỏ hơn 480px, --base-font-size được giảm thêm xuống 12px.

Phương pháp này giúp bạn dễ dàng duy trì kiểu chữ nhất quán trên các kích thước màn hình khác nhau. Bạn có thể dễ dàng điều chỉnh kích thước phông chữ cơ bản và tất cả các kích thước phông chữ dẫn xuất sẽ tự động cập nhật.

Những cân nhắc toàn cầu cho thiết kế đáp ứng

Khi thiết kế các trang web đáp ứng cho đối tượng toàn cầu, hãy ghi nhớ:

• Kích thước màn hình đa dạng: Người dùng truy cập web từ nhiều loại thiết bị khác nhau với các kích thước màn hình, độ phân giải và mật độ pixel khác nhau. Kiểm tra trang web của bạn trên các thiết bị và trình giả lập khác nhau để đảm bảo trang web trông đẹp trên tất cả chúng.
• Điều kiện mạng: Người dùng ở một số khu vực có thể có kết nối internet chậm hơn hoặc kém tin cậy hơn. Tối ưu hóa hiệu suất trang web của bạn để giảm thiểu thời gian tải và mức sử dụng dữ liệu.
• Phương thức nhập liệu: Cân nhắc các phương thức nhập liệu khác nhau, chẳng hạn như màn hình cảm ứng, bàn phím và chuột. Đảm bảo rằng trang web của bạn dễ điều hướng và tương tác bằng tất cả các phương thức nhập liệu.

3. Tính toán phức tạp với calc()

CSS Custom Properties có thể được kết hợp với hàm calc() để thực hiện các tính toán phức tạp trực tiếp trong CSS. Điều này có thể hữu ích để tạo bố cục động, điều chỉnh kích thước phần tử dựa trên kích thước màn hình hoặc tạo các hiệu ứng động phức tạp.

Ví dụ: Bố cục lưới động

Đây là cách bạn có thể tạo bố cục lưới động trong đó số lượng cột được xác định bởi một custom property:

            
:root {
  --num-columns: 3;
  --grid-gap: 10px;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(var(--num-columns), minmax(100px, 1fr));
  grid-gap: var(--grid-gap);
}

.grid-item {
  padding: 20px;
  background-color: #f0f0f0;
}

            

              
                Copy
              
            
          

Trong ví dụ này, custom property --num-columns xác định số lượng cột trong bố cục lưới. Thuộc tính grid-template-columns sử dụng hàm repeat() để tạo số lượng cột được chỉ định, mỗi cột có chiều rộng tối thiểu là 100px và chiều rộng tối đa là 1fr (đơn vị phân số). Custom property --grid-gap xác định khoảng cách giữa các mục lưới.

Bạn có thể dễ dàng thay đổi số lượng cột bằng cách cập nhật custom property --num-columns và bố cục lưới sẽ tự động điều chỉnh cho phù hợp. Bạn cũng có thể sử dụng media queries để thay đổi số lượng cột dựa trên kích thước màn hình, tạo bố cục lưới đáp ứng.

Ví dụ: Độ mờ dựa trên phần trăm

Bạn cũng có thể sử dụng custom properties để kiểm soát độ mờ dựa trên giá trị phần trăm:

            
:root {
    --opacity-percentage: 50;
}

.element {
    opacity: calc(var(--opacity-percentage) / 100);
}

            

              
                Copy
              
            
          

Điều này cho phép bạn điều chỉnh độ mờ bằng một biến duy nhất biểu thị phần trăm, cải thiện khả năng đọc và bảo trì.

4. Nâng cao kiểu thành phần

Custom properties là vô giá để tạo các thành phần giao diện người dùng có thể tái sử dụng và cấu hình. Bằng cách xác định custom properties cho các khía cạnh khác nhau của giao diện của một thành phần, bạn có thể dễ dàng tùy chỉnh kiểu dáng của nó mà không cần sửa đổi CSS cốt lõi của thành phần.

Ví dụ: Thành phần nút

Đây là một ví dụ về cách tạo một thành phần nút có thể cấu hình bằng CSS Custom Properties:

            
.button {
  --button-bg-color: #007bff;
  --button-text-color: #ffffff;
  --button-padding: 10px 20px;
  --button-border-radius: 5px;

  background-color: var(--button-bg-color);
  color: var(--button-text-color);
  padding: var(--button-padding);
  border-radius: var(--button-border-radius);
  border: none;
  cursor: pointer;
}

.button:hover {
  --button-bg-color: #0056b3;
}

.button.primary {
  --button-bg-color: #28a745;
}

            

              
                Copy
              
            
          

Trong ví dụ này, chúng ta xác định custom properties cho màu nền, màu văn bản, phần đệm và bán kính đường viền của nút. Các thuộc tính này có thể được ghi đè để tùy chỉnh giao diện của nút. Ví dụ: lớp .button.primary ghi đè thuộc tính --button-bg-color để tạo một nút chính với màu nền khác.

Phương pháp này cho phép bạn tạo một thư viện các thành phần giao diện người dùng có thể tái sử dụng có thể dễ dàng tùy chỉnh để phù hợp với thiết kế tổng thể của trang web hoặc ứng dụng của bạn.

5. Tích hợp CSS-in-JS nâng cao

Mặc dù CSS Custom Properties là nguyên bản của CSS, nhưng chúng cũng có thể được tích hợp liền mạch với các thư viện CSS-in-JS như Styled Components hoặc Emotion. Điều này cho phép bạn sử dụng JavaScript để tạo động các giá trị custom property dựa trên trạng thái ứng dụng hoặc tùy chọn của người dùng.

Ví dụ: Chủ đề động trong React với Styled Components

            
import styled from 'styled-components';

const theme = {
  light: {
    backgroundColor: '#ffffff',
    textColor: '#000000',
  },
  dark: {
    backgroundColor: '#333333',
    textColor: '#ffffff',
  },
};

const Button = styled.button`
  background-color: ${props => props.theme.backgroundColor};
  color: ${props => props.theme.textColor};
  padding: 10px 20px;
  border: none;
  cursor: pointer;
`;

function App() {
  const [currentTheme, setCurrentTheme] = React.useState('light');

  const toggleTheme = () => {
    setCurrentTheme(currentTheme === 'light' ? 'dark' : 'light');
  };

  return (
    <div>
      <Button theme={theme[currentTheme]}>Click Me</Button>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

Trong ví dụ này, chúng ta xác định một đối tượng theme chứa các cấu hình chủ đề khác nhau. Thành phần Button sử dụng Styled Components để truy cập các giá trị chủ đề và áp dụng chúng cho kiểu dáng của nút. Hàm toggleTheme cập nhật chủ đề hiện tại, khiến giao diện của nút thay đổi theo.

Phương pháp này cho phép bạn tạo các thành phần giao diện người dùng có tính động và tùy biến cao, phản hồi các thay đổi trong trạng thái ứng dụng hoặc tùy chọn của người dùng.

6. Điều khiển hoạt ảnh bằng CSS Custom Properties

CSS Custom Properties có thể được sử dụng để kiểm soát các tham số hoạt ảnh, chẳng hạn như thời lượng, độ trễ và các hàm easing. Điều này cho phép bạn tạo các hoạt ảnh linh hoạt và động hơn, có thể dễ dàng điều chỉnh mà không cần sửa đổi CSS cốt lõi của hoạt ảnh.

Ví dụ: Thời lượng hoạt ảnh động

            
:root {
  --animation-duration: 1s;
}

.element {
  animation: fadeIn var(--animation-duration) ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

            

              
                Copy
              
            
          

Trong ví dụ này, custom property --animation-duration kiểm soát thời lượng của hoạt ảnh fadeIn. Bạn có thể dễ dàng thay đổi thời lượng hoạt ảnh bằng cách cập nhật giá trị custom property và hoạt ảnh sẽ tự động điều chỉnh cho phù hợp.

Ví dụ: Hoạt ảnh so le

Để điều khiển hoạt ảnh nâng cao hơn, hãy cân nhắc sử dụng custom properties với `animation-delay` để tạo hoạt ảnh so le, thường thấy trong các chuỗi tải hoặc trải nghiệm giới thiệu.

            
.staggered-item:nth-child(1) {
  animation-delay: calc(var(--stagger-delay) * 0);
}

.staggered-item:nth-child(2) {
  animation-delay: calc(var(--stagger-delay) * 1);
}

.staggered-item:nth-child(3) {
  animation-delay: calc(var(--stagger-delay) * 2);
}

            

              
                Copy
              
            
          

Ở đây, `--stagger-delay` xác định độ lệch thời gian giữa mỗi lần bắt đầu hoạt ảnh của mục, tạo hiệu ứng xếp tầng.

7. Gỡ lỗi với Custom Properties

Custom Properties cũng có thể hỗ trợ gỡ lỗi. Gán một custom property và thay đổi giá trị của nó cung cấp một chỉ báo trực quan rõ ràng. Ví dụ: tạm thời thay đổi một thuộc tính màu nền có thể nhanh chóng làm nổi bật khu vực bị ảnh hưởng bởi một quy tắc kiểu cụ thể.

Ví dụ: Làm nổi bật các sự cố về bố cục

            
.problematic-area {
   --debug-color: red; /* Add this temporarily */
   background-color: var(--debug-color, transparent); /* Fallback to transparent if --debug-color is not defined */
}

            

              
                Copy
              
            
          

Cú pháp `var(--debug-color, transparent)` cung cấp một giá trị dự phòng. Nếu `--debug-color` được xác định, nó sẽ được sử dụng; nếu không, `transparent` sẽ được áp dụng. Điều này ngăn ngừa lỗi nếu custom property vô tình bị xóa.

Các phương pháp hay nhất để sử dụng CSS Custom Properties

Để đảm bảo rằng bạn đang sử dụng CSS Custom Properties một cách hiệu quả, hãy cân nhắc các phương pháp hay nhất sau:

• Sử dụng tên mô tả: Chọn tên cho biết rõ mục đích của custom property.
• Xác định các giá trị mặc định: Cung cấp các giá trị mặc định cho custom properties để đảm bảo rằng kiểu dáng của bạn hoạt động chính xác ngay cả khi custom property không được xác định. Sử dụng đối số thứ hai của hàm var() cho mục đích này (ví dụ: color: var(--text-color, #333);).
• Sắp xếp custom properties của bạn: Nhóm các custom properties liên quan lại với nhau và sử dụng nhận xét để ghi lại mục đích của chúng.
• Sử dụng CSS ngữ nghĩa: Đảm bảo rằng CSS của bạn có cấu trúc tốt và sử dụng các tên lớp có ý nghĩa.
• Kiểm tra kỹ lưỡng: Kiểm tra trang web hoặc ứng dụng của bạn trong các trình duyệt và thiết bị khác nhau để đảm bảo rằng custom properties của bạn hoạt động như mong đợi.

Cân nhắc về hiệu suất

Mặc dù CSS Custom Properties mang lại nhiều lợi ích, nhưng điều quan trọng là phải nhận thức được những tác động tiềm ẩn của chúng đến hiệu suất. Nói chung, việc sử dụng custom properties có tác động tối thiểu đến hiệu suất kết xuất. Tuy nhiên, việc sử dụng quá nhiều các phép tính phức tạp hoặc cập nhật thường xuyên các giá trị custom property có thể dẫn đến tắc nghẽn hiệu suất.

Để tối ưu hóa hiệu suất, hãy cân nhắc những điều sau:

• Giảm thiểu thao tác DOM: Tránh cập nhật thường xuyên các giá trị custom property bằng JavaScript, vì điều này có thể kích hoạt reflows và repaints.
• Sử dụng tăng tốc phần cứng: Khi tạo hoạt ảnh cho custom properties, hãy sử dụng các kỹ thuật tăng tốc phần cứng (ví dụ: transform: translateZ(0);) để cải thiện hiệu suất.
• Hồ sơ mã của bạn: Sử dụng các công cụ dành cho nhà phát triển của trình duyệt để lập hồ sơ mã của bạn và xác định bất kỳ tắc nghẽn hiệu suất nào liên quan đến custom properties.

So sánh với CSS Preprocessors

CSS Custom Properties thường được so sánh với các biến trong CSS preprocessors như Sass hoặc Less. Mặc dù cả hai đều cung cấp chức năng tương tự, nhưng có một số khác biệt chính:

• Thời gian chạy so với Thời gian biên dịch: Custom properties được trình duyệt đánh giá tại thời gian chạy, trong khi các biến preprocessor được đánh giá tại thời gian biên dịch. Điều này có nghĩa là custom properties có thể được cập nhật động bằng JavaScript, trong khi các biến preprocessor thì không thể.
• Phạm vi: Custom properties tuân theo các quy tắc xếp tầng và kế thừa, trong khi các biến preprocessor có phạm vi hạn chế hơn.
• Hỗ trợ trình duyệt: CSS Custom Properties được hỗ trợ nguyên bản bởi các trình duyệt hiện đại, trong khi CSS preprocessors yêu cầu quy trình xây dựng để biên dịch mã thành CSS tiêu chuẩn.

Nói chung, CSS Custom Properties là một giải pháp linh hoạt và mạnh mẽ hơn cho kiểu dáng động, trong khi CSS preprocessors phù hợp hơn cho việc tổ chức mã và kiểu dáng tĩnh.

Kết luận

CSS Custom Properties là một công cụ mạnh mẽ để tạo các biểu định kiểu động, dễ bảo trì và đáp ứng. Bằng cách tận dụng các kỹ thuật nâng cao như tạo chủ đề động, thiết kế đáp ứng, tính toán phức tạp và kiểu dáng thành phần, bạn có thể cải thiện đáng kể quy trình phát triển front-end của mình. Hãy nhớ tuân theo các phương pháp hay nhất và xem xét các tác động đến hiệu suất để đảm bảo rằng bạn đang sử dụng CSS Custom Properties một cách hiệu quả. Khi sự hỗ trợ của trình duyệt tiếp tục được cải thiện, CSS Custom Properties sẵn sàng trở thành một phần thiết yếu hơn nữa trong bộ công cụ của mọi nhà phát triển front-end.

Hướng dẫn này đã cung cấp một cái nhìn tổng quan toàn diện về cách sử dụng CSS Custom Property nâng cao. Hãy thử nghiệm với các kỹ thuật này, khám phá thêm tài liệu và điều chỉnh chúng cho các dự án của bạn. Chúc bạn viết mã vui vẻ!