用CSS自定義屬性和尾風為主題染色

CSS自定義屬性不僅提高了代碼效率，還在CSS中創造了更多可能性，尤其在主題設計方面潛力巨大。 Atomic Smash團隊使用Tailwind CSS（一個實用程序類框架）編寫樣式。本文將探討如何使用自定義屬性進行主題設計，以及如何將其與Tailwind集成以最大限度地提高代碼的可重用性。本文不會講解Tailwind的入門使用——請查看官方文檔——但即使您是Tailwind新手，也可能會發現一些技巧很有用。

主題概述

假設我們有一個“號召性用語”（CTA）組件，包含標題、正文和按鈕。

為這種配色方案編寫常規（非Tailwind）CSS如下所示：

 <code>.cta { background-color: #742a2a; // 深红色 color: #ffffff; // 白色}  .cta__heading { background-color: #e53e3e; // 中等红色 color: #742a2a; } .cta__button { background-color: #e53e3e; }</code>

使用Tailwind，我們將在HTML中應用這些顏色作為實用程序類：

<code><div>
<h3 id="加入我們的郵件列表">加入我們的郵件列表</h3>
<div>
<p>搶先了解我們的新產品</p>
  註冊</div>
</div></code>

我故意省略了與基本配色方案無關的類，但您可以在此演示中查看完整的示例：

現在，如果我們想將不同的配色方案應用於我們的組件，我們需要覆蓋原始組件的顏色值。在沒有Tailwind的情況下，一種常見的方法是將主題類附加到組件本身，並在級聯中重新定義顏色值。因此，對於具有“.cta--blue”（使用BEM約定）修飾符類的組件，我們將應用藍色配色方案的CSS值：

 <code>.cta--blue { background-color: #2a4365; // 深蓝色} .cta--blue .cta__heading { background-color: #3182ce; // 中等蓝色 color: #2a4365; } .cta--blue .cta__button { background-color: #3182ce; }</code>

如果我們使用Sass或其他預處理器，則可以使用變量來簡化我們的工作，我們可能會嵌套.cta__heading和.cta__body選擇器。它並沒有使我們的代碼更簡潔，但通過在一個地方更新這些值，它確實使代碼更易於管理。

現在，假設我們有10種不同的配色方案，就像我最近在一個項目中的經歷一樣。我們的代碼開始變長，因為我們基本上重複了上述示例10次才能更改這些顏色值。現在想像一下，我們設計系統中的每個組件都需要10種配色方案，而且許多組件比我們簡單的CTA複雜得多。也許我們的主題也需要不同的字體。突然之間，我們需要編寫大量的CSS。

使用Tailwind進行主題設計

另一方面，如果我們使用Tailwind，則需要更改HTML本身中的多個類。即使我們使用JavaScript框架（如React或Vue），這也不是一項簡單的任務。為了確保在生產版本中刪除未使用的樣式，Tailwind不鼓勵使用字符串連接來創建類名（在撰寫本文時）。因此，構建我們的主題可能意味著將大量邏輯添加到我們的組件中。

使用自定義屬性進行主題設計

通過為我們的顏色主題使用自定義屬性，我們可以大幅減少需要編寫的代碼量，並減輕維護負擔。讓我們首先看看如何在常規CSS中做到這一點。

我們將自定義屬性定義為:root選擇器上的變量，使其成為全局變量。 （body選擇器同樣適用。）然後，我們可以使用這些變量在選擇器中替換顏色屬性值：

 <code>:root { --primary: #742a2a; // 深红色 --secondary: #e53e3e; // 中等红色} .cta { background-color: var(--primary); color: white; } .cta__heading { background-color: var(--secondary); color: var(--primary); } .cta__button { background-color: var(--secondary); }</code>

這就是真正神奇的地方：現在創建每個主題的代碼只需要更新這些自定義屬性值。無論我們在哪裡應用主題類，新值都會被繼承：

 <code>.th-blue { --primary: #2a4365; // 深蓝色 --secondary: #3182ce; // 中等蓝色}</code>

如果我們想要藍色配色方案，我們可以將.th-blue類應用於組件，甚至可以在標籤上使用它來應用頁面範圍的主題，然後根據需要在各個組件上覆蓋它。與組件特定類（例如原始代碼中的.cta--blue）相比，使用實用程序類可能會節省我們更多的代碼編寫工作，因為它可以應用於我們代碼庫中的任何位置。

處理舊版瀏覽器

與許多代理機構一樣，Atomic Smash的許多客戶仍然需要我們支持Internet Explorer 11。雖然在大多數情況下我都可以接受漸進增強方法（例如，為不支持CSS Grid的瀏覽器提供更簡單的回退佈局），但我發現主題設計是一個通常不允許輕鬆妥協的領域。客戶希望看到他們的品牌顏色和字體，即使是在舊版瀏覽器上也是如此。使用特性查詢提供回退將需要大量額外的工作，這將抵消使用自定義屬性的好處。為了克服這個問題，我們需要一個polyfill。

有幾個選項可以在IE 11中為自定義屬性提供polyfill。

postcss-custom-properties

第一個是使用名為postcss-custom-properties的PostCSS插件。如果您已經在工作流程中使用PostCSS，則添加此插件相當簡單。它的工作原理是處理您的CSS並輸出變量的結果作為屬性值。因此，如果您有以下CSS：

 <code>:root { --color: red; } h1 { color: var(--color); }</code>

處理後的結果將是：

 <code>h1 { color: red; color: var(--color); }</code>

不支持自定義屬性的瀏覽器將忽略第二個規則，並回退到常規屬性值。還有一個選項是從輸出中刪除具有自定義屬性的規則，因此文件大小會更小。這意味著沒有瀏覽器會獲得自定義屬性——如果您動態更新變量，這是一個問題——但是您可以將它們用於代碼中的靜態值而不會產生不良影響。

不幸的是，這個polyfill有一些限制：

1. 您需要在配置中指定定義自定義屬性的文件（或文件）。
2. 自定義屬性只能在:root選擇器上定義。

第一個限制相對微不足道，但第二個限制不幸地使這個polyfill完全無法用於我們的主題設計用例。這意味著我們無法在選擇器上重新定義變量來創建我們的主題。

ie11CustomProperties

此polyfill選項涉及提供客戶端腳本，而不是預處理CSS。我們可以將以下腳本添加到我們的head中，以確保polyfill只在IE 11中加載：

 <code>window.MSInputMethodContext && document.documentMode && document.write('');</code>

這允許我們像此處示例中一樣充分利用自定義屬性的優勢，因此這是我決定使用的解決方案。它有一個限制，即在style屬性中設置的自定義屬性不會被polyfill。但我已經針對上面的主題設計示例對其進行了測試，並且它運行良好。

但這與Tailwind有什麼關係？

正如我們已經看到的，實用程序類——可以在HTML中的任何位置應用的單用途類——可以使我們的代碼更易於重用。這是Tailwind和其他實用程序類框架的主要賣點——您交付的CSS文件大小最終會因此變小。 Tailwind提供了多個顏色類：.bg-red-medium將為我們提供紅色background-color屬性值，.text-red-medium用於color，依此類推，對於border、box-shadow或您可以想到的任何可能需要顏色值的地方。

顏色可以在配置文件中定義：

 <code>module.exports = { theme: {  colors: {   red: {    medium: '#e53e3e',    dark: '#742a2a'   },   blue: {    medium: '#3182ce',    dark: '#2a4365'   }  } } }</code>

如果我們想為我們的Tailwind類使用自定義屬性值，我們可以在配置中指定它們：

 <code>module.exports = { theme: {  colors: {   'th-primary': 'var(--primary)',   'th-secondary': 'var(--secondary)'  } } }</code>

我在主題相關的類名前加上了th-前綴，以便很明顯它們與主題設計特別相關，但您可以隨意使用任何適合您的約定。

現在，我們可以通過Tailwind使用這些類。使用.bg-th-primary相當於編寫：

 <code>.some-element { background-color: var(--primary); }</code>

在我們的CSS中，我們可以像以前一樣定義主題的自定義屬性：

 <code>:root { --primary: #742a2a; --secondary: #742a2a; } .th-blue { --primary: #2a4365; --secondary: #3182ce; }</code>

讓我們將這些類應用於我們的HTML。第一個示例為我們提供了一個具有默認主題（在:root上定義的變量）的組件。第二個具有我們的藍色主題。唯一的區別是在組件上添加了.th-blue類。 （為了簡潔和清晰，我又省略了與主題無關的類。）

<code><div class="bg-th-primary text-white">
<h3 id="加入我們的郵件列表"> 加入我們的郵件列表</h3>
<div>
<p>搶先了解我們的新產品</p>
<button class="bg-th-secondary">註冊</button>
</div>
</div>


<div class="th-blue bg-th-primary text-white">
<h3 id="加入我們的郵件列表">加入我們的郵件列表</h3>
<div>
<p>搶先了解我們的新產品</p>
<button class="bg-th-secondary">註冊</button>
</div>
</div></code>

使用配置作為樣式指南

Tailwind鼓勵您在配置中定義所有變量，就我個人而言，我同意這是一種更好的方法。這意味著配置文件可以成為單一事實來源，而不是（可能）最終有多個地方來定義顏色和其他主題值。幸運的是，我們也可以將Tailwind配置文件中的值用於我們的自定義屬性。我們需要首先在配置中定義所有顏色（假設我們不使用Tailwind包含的默認調色板）：

 <code>module.exports = { theme: {  colors: {   red: {    medium: '#e53e3e',    dark: '#742a2a'   },   blue: {    medium: '#3182ce',    dark: '#2a4365'   },   'th-primary': 'var(--primary)',   'th-secondary': 'var(--secondary)'  } } }</code>

然後，我們可以訪問CSS中的theme對象：

 <code>:root { --primary: theme('colors.red.dark'); --secondary: theme('colors.red.medium'); } .th-blue { --primary: theme('colors.blue.dark'); --secondary: theme('colors.blue.medium'); }</code>

總結

我非常高興能夠使用自定義屬性而無需擔心瀏覽器支持，更高興能夠將其與我們現有的工作流程無縫集成。很難誇大它們在主題設計方面將為我們節省的時間。我希望即使您不是Tailwind用戶，本文也可能會鼓勵您為此用例嘗試自定義屬性。

以上是用CSS自定義屬性和尾風為主題染色的詳細內容。更多資訊請關注PHP中文網其他相關文章！