M

MLOG

Tiếng Việt

Khám phá các kỹ thuật nâng cao sử dụng CSS custom properties (biến) để tạo các chủ đề động, thiết kế đáp ứng, tính toán phức tạp và cải thiện khả năng bảo trì trong biểu định kiểu của bạn.

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:

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);
}

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>

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';
  }
});

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:

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;
  }
}

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ớ:

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;
}

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);
}

Đ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;
}

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;

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;
  }
}

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);
}

Ở đâ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 */
}

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:

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:

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:

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ẻ!