Các thuộc tính tùy chỉnh và kế thừa

3.1 Thuộc tính tùy chỉnh

Các biến CSS, còn được gọi là thuộc tính tùy chỉnh, cung cấp một công cụ mạnh mẽ để quản lý các phong cách trong phát triển web. Việc sử dụng chúng ảnh hưởng đến hiệu suất và tổ chức mã, cải thiện khả năng hỗ trợ và linh hoạt của CSS. Hãy cùng xem xét chi tiết hơn cách mà các thuộc tính tùy chỉnh và kế thừa có thể ảnh hưởng đến các khía cạnh này.

Các thuộc tính tùy chỉnh là gì?

Nhắc lại một chút, thuộc tính tùy chỉnh (hay biến CSS) là các giá trị có thể được đặt trong CSS và sau đó sử dụng nhiều lần trong toàn bộ tệp phong cách. Chúng được khai báo bằng hai dấu gạch ngang (--) và có thể được sử dụng với hàm var().

Khai báo thuộc tính tùy chỉnh:

    
      :root {
        --main-color: #3498db;
        --padding: 10px;
      }
    
  

Sử dụng thuộc tính tùy chỉnh:

    
      background-color: var(--main-color);
      padding: var(--padding);
    
  

3.2 Ảnh hưởng đến hiệu suất

1. Tối ưu hóa việc sử dụng lại

Sử dụng các biến CSS giúp tránh sự lặp lại mã, vì cùng một giá trị có thể được sử dụng nhiều lần, điều này làm giảm dung lượng mã và đơn giản hóa việc duy trì mã.

Ví dụ:

    
      :root {
        --main-color: #3498db;
      }

      .header {
        background-color: var(--main-color);
      }

      .footer {
        background-color: var(--main-color);
      }
    
  

2. Bộ nhớ cache và rendering

Các trình duyệt có thể hiệu quả bộ nhớ cache và xử lý các biến CSS, điều này ảnh hưởng tích cực đến hiệu suất. Khi giá trị của biến thay đổi, trình duyệt chỉ cần tính toán lại phong cách một lần, giảm tải công việc cho rendering.

3. Cập nhật động

Các biến CSS có thể được thay đổi động bằng JavaScript, cho phép cập nhật các phong cách mà không cần tính toán lại toàn bộ trang.

Ví dụ:

    
      document.documentElement.style.setProperty('--main-color', '#e74c3c');
    
  

3.3 Ảnh hưởng đến tổ chức mã

Quản lý phong cách tập trung

Với việc định nghĩa các biến CSS tại một nơi, bạn có thể quản lý phong cách một cách tập trung, điều này đơn giản hóa việc duy trì và thay đổi các phong cách.

Ví dụ

Thay đổi giá trị biến trong :root sẽ tự động cập nhật tất cả các phong cách liên quan trên toàn bộ tài liệu:

    
      :root {
        --font-size: 16px;
        --line-height: 1.5;
      }

      body {
        font-size: var(--font-size);
        line-height: var(--line-height);
      }
    
  

Kế thừa và ngữ cảnh

Các biến CSS được kế thừa bởi các phần tử con từ phần tử cha. Điều này cho phép đặt giá trị ở cấp độ cao và sử dụng chúng trong các ngữ cảnh cụ thể hơn.

Ví dụ:

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

      .container {
        font-size: var(--base-font-size);
      }

      .container .heading {
        font-size: calc(var(--base-font-size) * 1.5);
      }
    
  

Cải thiện khả năng đọc

Sử dụng các biến CSS cải thiện khả năng đọc mã, vì các biến có thể được đặt tên phù hợp với chức năng của chúng, làm cho mã dễ hiểu hơn.

Ví dụ:

    
      :root {
        --primary-color: #3498db;
        --secondary-color: #2ecc71;
      }

      .primary-button {
        background-color: var(--primary-color);
      }

      .secondary-button {
        background-color: var(--secondary-color);
      }
    
  

Biến cục bộ và toàn cầu

Các biến có thể được khai báo ở mức toàn cầu (ví dụ: trong :root) hoặc cục bộ cho các bộ chọn cụ thể. Điều này cho phép tạo ra các phong cách linh hoạt và thích ứng.

Ví dụ:

    
      :root {
        --global-padding: 10px;
      }

      .section {
        --section-padding: 20px;
        padding: var(--section-padding);
      }

      .item {
        padding: var(--global-padding);
      }
    
  

3.4 Ví dụ về triển khai hoàn chỉnh

Đây là một ví dụ sử dụng biến cho kế thừa và ghi đè cục bộ:

    
      :root {
        --main-padding: 10px;
        --main-margin: 20px;
        --primary-color: #3498db;
      }

      .container {
        padding: var(--main-padding);
        margin: var(--main-margin);
      }

      .container .header {
        --primary-color: #e74c3c; /* Ghi đè biến cho sử dụng cục bộ */
        color: var(--primary-color);
      }

      .container .content {
        color: var(--primary-color); /* Sử dụng giá trị biến từ root */
      }
    
  

    
      <div class="container">
        <div class="header">This is the header</div>
        <div class="content">This is the content</div>
      </div>
    
  

Giải thích:

• Trong ví dụ này --primary-color được sử dụng để tạo kiểu chữ trong phần tử .content, kế thừa giá trị từ root
• Trong phần tử .header, biến --primary-color bị ghi đè và sử dụng giá trị mới