Sử dụng các thuộc tính tùy chỉnh CSS để giảm kích thước CSS của bạn

Không giống như các biến SASS, Thuộc tính tùy chỉnh CSS có thể được sửa đổi trong bộ chọn lớp, cho phép bạn tạo trừu tượng hóa và giảm kích thước CSS của bạn.

Hãy để tôi chỉ cho bạn một ví dụ!

Trong Khung CodyHouse, chúng tôi sử dụng các lớp tiện ích .grid-gap- {size} để đặt khoảng cách giữa các mục lưới:

  .grid {
  hiển thị: flex;
  flex-quấn: bọc;

  > * {
    cơ sở flex: 100%;
  }
}

.grid-gap-xxxs {
  lề dưới: calc (-1 * var (- dấu cách-xxxs));
  lề trái: calc (-1 * var (- dấu cách-xxxs));

  > * {
    lề dưới: var (- dấu cách-xxxs);
    lề trái: calc (var (- dấu cách-xxxs));
  }
}

.grid-gap-xxs {
  lề dưới: calc (-1 * var (- dấu cách-xxs));
  lề trái: calc (-1 * var (- dấu cách-xxs));

  > * {
    lề-dưới: var (- dấu cách-xxs);
    lề trái: calc (var (- dấu cách-xxs));
  }
}

.grid-gap-xs {
  lề dưới: calc (-1 * var (- dấu cách-xs));
  lề trái: calc (-1 * var (- dấu cách-xs));

  > * {
    lề-đáy: var (- dấu cách-xs);
    lề trái: calc (var (- dấu cách-xs));
  }
}

.grid-gap-sm {
  lề dưới: calc (-1 * var (- dấu cách-sm));
  lề trái: calc (-1 * var (- dấu cách-sm));

  > * {
    lề-đáy: var (- dấu cách-sm);
    lề trái: calc (var (- space-sm));
  }
}

.grid-gap-md {
  lề dưới: calc (-1 * var (- dấu cách-md));
  lề trái: calc (-1 * var (- dấu cách-md));

  > * {
    lề-đáy: var (- dấu cách-md);
    lề trái: calc (var (- space-md));
  }
}

.grid-gap-lg {
  lề dưới: calc (-1 * var (- dấu cách-lg));
  lề trái: calc (-1 * var (- dấu cách-lg));

  > * {
    lề-đáy: var (- dấu cách-lg);
    lề trái: calc (var (- dấu cách-lg));
  }
}

.grid-gap-xl {
  lề dưới: calc (-1 * var (- dấu cách-xl));
  lề trái: calc (-1 * var (- dấu cách-xl));

  > * {
    lề-đáy: var (- dấu cách-xl);
    lề trái: calc (var (- space-xl));
  }
}

.grid-gap-xxl {
  lề dưới: calc (-1 * var (- dấu cách-xxl));
  lề trái: calc (-1 * var (- dấu cách-xxl));

  > * {
    lề-đáy: var (- dấu cách-xxl);
    lề trái: calc (var (- space-xxl));
  }
}

.grid-gap-xxxl {
  lề dưới: calc (-1 * var (- dấu cách-xxxl));
  lề trái: calc (-1 * var (- dấu cách-xxxl));

  > * {
    lề dưới: var (- dấu cách-xxxl);
    lề trái: calc (var (- dấu cách-xxxl));
  }
}  

Bởi vì có rất nhiều sự lặp lại, vài tuần trước, chúng tôi đã quyết định sử dụng các thuộc tính tùy chỉnh CSS để đơn giản hóa các lớp này.

Bước đầu tiên là tạo ra một sự trừu tượng có chứa mã chúng ta lặp lại cho mỗi lớp tiện ích:

  [class*="grid-gap"] {
  lề dưới: calc (-1 * var (- lưới-gap, 1em));
  lề trái: calc (-1 * var (- lưới-gap, 1em));

  > * {
    lề dưới: var (- lưới-gap, 1em);
    lề trái: var (- lưới-gap, 1em);
  }
}  

Công cụ chọn thuộc tính này tìm kiếm các lớp có chứa chuỗi "gap-gap" (tất cả các lớp tiện ích gap-gap). Lưu ý rằng chúng tôi đã thay thế các biến - đơn vị không gian bằng biến mới - khoảng cách lưới .

Trong lớp .grid chúng tôi đã đặt biến - khoảng cách lưới bằng 0 (giá trị mặc định).

  .grid {
  --grid-gap: 0px;
  hiển thị: flex;
  flex-quấn: bọc;

  > * {
    cơ sở flex: 100%;
  }
}  

Bây giờ chúng ta có thể sửa đổi, ví dụ, lớp .grid-gap-xxxxs như sau:

  .grid-gap-xxxxs {--grid-gap: var (- space-xxxxs); }  

Chúng tôi không còn cần tất cả các đoạn mã về lề; chúng ta chỉ có thể sửa đổi giá trị của biến - lưới-gap .

Nếu chúng ta làm tương tự cho tất cả các lớp tiện ích, chúng ta sẽ có kết quả như sau:

  .grid {
  --grid-gap: 0px;
  hiển thị: flex;
  flex-quấn: bọc;

  > * {
    cơ sở flex: 100%;
  }
}

[class*="grid-gap"] {
  lề dưới: calc (-1 * var (- lưới-gap, 1em));
  lề trái: calc (-1 * var (- lưới-gap, 1em));

  > * {
    lề dưới: var (- lưới-gap, 1em);
    lề trái: var (- lưới-gap, 1em);
  }
}

.grid-gap-xxxxs {--grid-gap: var (- dấu cách-xxxxs); }
.grid-gap-xxxs {--grid-gap: var (- dấu cách-xxxs); }
.grid-gap-xxs {--grid-gap: var (- space-xxs); }
.grid-gap-xs {--grid-gap: var (- space-xs); }
.grid-gap-sm {--grid-gap: var (- space-sm); }
.grid-gap-md {--grid-gap: var (- space-md); }
.grid-gap-lg {--grid-gap: var (- space-lg); }
.grid-gap-xl {--grid-gap: var (- space-xl); }
.grid-gap-xxl {--grid-gap: var (- space-xxl); }
.grid-gap-xxxl {--grid-gap: var (- dấu cách-xxxl); }
.grid-gap-xxxxl {--grid-gap: var (- dấu cách-xxxxl); }  

Tối ưu hóa này giảm hơn một nửa kích thước CSS của ví dụ này! Rõ ràng, bạn chỉ có thể áp dụng kỹ thuật này khi có thể trừu tượng hóa một số quy tắc (Tôi không gợi ý rằng các thuộc tính tùy chỉnh CSS sẽ giảm một nửa kích thước CSS của bạn). Tuy nhiên, hướng dẫn này chỉ là một ví dụ về tối ưu hóa mã được thực hiện bằng cách sử dụng các biến CSS.

ps: Biến CSS được hỗ trợ trong tất cả các trình duyệt hiện đại.

Nếu bạn muốn tìm hiểu thêm về hệ thống lưới của chúng tôi, hãy tải xuống khung của chúng tôi hoặc kiểm tra trang Lưới và Bố cục của tài liệu.