CSS自定義屬性通過允許全局定義和設(shè)計令牌的運(yùn)行時更新來實現(xiàn)可維護(hù)和動態(tài)的主題； 1。定義一致的設(shè)計令牌：根源的顏色，間距和排版； 2。使用類切換和JavaScript動態(tài)切換主題，通過LocalStorage或Prefers-Color-Scheme利用繼承和持久性； 3。範(fàn)圍變量局部用於組件變體，可重複使用和繼承，而無需冗餘CSS； 4。使用var（）中的後備值，以確保變量未定義時優(yōu)美的降解； 5。以語義命名和邏輯分組組織變量，以在大型項目中有效地擴(kuò)展 - 為主題和可擴(kuò)展的UI提供了一種本地，有力的解決方案。

CSS自定義屬性（通常稱為CSS變量）是創(chuàng)建可維護(hù)，可擴(kuò)展和可用的Web接口的強(qiáng)大工具。與預(yù)處理器變量（如SASS中的變量）不同，CSS自定義屬性是運(yùn)行時CSS的一部分，這意味著可以通過JavaScript動態(tài)更改它們，並通過DOM自然進(jìn)行級聯(lián)。

這是它們?nèi)绾螏椭黝}和可擴(kuò)展性的方式 - 以及如何有效使用它們。

1。定義變量以保持一致的主題

自定義屬性使您可以在一個地方定義設(shè)計令牌（顏色，間距，字體等），從而易於保持視覺一致性。

 ：根 {
  / *調(diào)色板 */
   - 彩色 - 原理：＃005FCC;
   - 彩色 - 大專：＃6C757D;
   - 彩色 - 顏色：＃28A745;
   - 彩色背景：#ffffff;
   - 色文本：＃212529;

  / *間距 */
   - 空間-SM：0.5REM;
   - 空間-MD：1REM;
   - 空間LG：1.5REM;

  / *版式 */
   - 五大底座：16px;
   -  font戶主：“ inter”，sans-serif;
}

然後在您的樣式上使用它們：

 。按鈕 {
  背景色：var（ - 顏色 - 顏色）;
  顏色：白色；
  填充：var（-space-sm）var（-space-md）;
  字體大小：var（ - 字體大小基本）;
}

這集中了設(shè)計決策 - 更改--color-primary會使用它更新每個組件。

2。啟用動態(tài)主題切換

由於CSS變量是DOM-WARE的，因此您可以在運(yùn)行時更改它們 - 非常適合輕/暗模式或用戶選擇的主題。

使用課程來範(fàn)圍主題：

 ：根 {
   - 彩色背景：#ffffff;
   - 色文本：＃212529;
}

。
   - 彩色背景：＃1A1A1A;
   - 色文本：＃f0f0f0;
}

身體 {
  背景色：var（ - 顏色背景）;
  顏色：var（ - 顏色文本）;
  過渡：背景色0.3s易於;
}

用JavaScript切換主題：

 document.body.classlist.toggle（'theme-dark'）;

您甚至可以使用localStorage或prefers-color-scheme堅持用戶的喜好。

3。組件級重複使用的範(fàn)圍變量

CSS變量繼承，因此您可以在特定上下文中覆蓋它們 - 非常適合組件變體。

 ?？ㄆ?{
   - 卡片塗片：var（-space-md）;
  填充：var（ - 卡片）;
  邊界：1PX實心var（ - 顏色 - 次數(shù)）;
}

.Card-large {
   - 卡塗層：var（ -  space-lg）;
}

現(xiàn)在。 .card-large從.card繼承所有樣式，但使用較大的填充 - 不需要重寫規(guī)則。

該模式支持可擴(kuò)展的組件系統(tǒng)，類似於CSS-IN-JS或諸如尾風(fēng)或材料之類的設(shè)計系統(tǒng)。

4。後備和驗證

使用var()中的後備值來處理丟失的變量：

 .Color-block {
  背景色：var（ - 顏色高光，＃ff6b6b）;
}

如果未定義變量，則可以確保樣式優(yōu)雅地降級。

注意：CSS不支持運(yùn)行時類型檢查，因此始終記錄預(yù)期格式（例如， rem中的--spacing ， - 彩色，在HEX/RGB中--color ）。

5。隨著縮放的範(fàn)圍保持井井有條

隨著項目的增長，邏輯地組織變量：

• 小組按類別：顏色，間距，版式，陰影
• 使用命名慣例： --component-property-state （例如--button-bg-hover ）
• 考慮使用跨平臺同步的設(shè)計令牌系統(tǒng)

示例結(jié)構(gòu)：

 ：根 {
  /* 顏色 */
   - 彩色品牌：＃005FCC;
   - 顏色品牌懸掛：＃004A99;

  /* 佈局 */
   - 寬大：1200px;

  / *特定於組件的 */
   - 鈕扣 - 巴特 - 拉迪烏斯：4px;
}

最後的想法

CSS自定義屬性不僅僅是減少重複 - 它們是建立適應(yīng)性，可維護(hù)UI的基礎(chǔ)。當(dāng)與語義命名，邏輯範(fàn)圍和JavaScript交互結(jié)合使用時，它們提供了一個輕巧的主題系統(tǒng)，可隨您的應(yīng)用程序擴(kuò)展。

您不需要框架即可進(jìn)行動態(tài)主題。與:root ， var()和一些JS，您有一個強(qiáng)大的本機(jī)解決方案。

基本上：定義一次，重複使用，全球更新，然後讓瀏覽器完成其餘的工作。

以上是CSS自定義屬性（變量）用於主題和可擴(kuò)展性的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！