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

主題概述

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

為這種配色方案編寫常規(guī)（非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>加入我們的郵件列表</h3>
? <div>
? ? <p>搶先了解我們的新產(chǎn)品</p>
? ? 注冊
? </div>
</div></code>

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

現(xiàn)在，如果我們想將不同的配色方案應用于我們的組件，我們需要覆蓋原始組件的顏色值。在沒有Tailwind的情況下，一種常見的方法是將主題類附加到組件本身，并在級聯(lián)中重新定義顏色值。因此，對于具有“.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選擇器。它并沒有使我們的代碼更簡潔，但通過在一個地方更新這些值，它確實使代碼更易于管理。

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

使用Tailwind進行主題設計

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

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

通過為我們的顏色主題使用自定義屬性，我們可以大幅減少需要編寫的代碼量，并減輕維護負擔。讓我們首先看看如何在常規(guī)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>

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

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

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

處理舊版瀏覽器

與許多代理機構(gòu)一樣，Atomic Smash的許多客戶仍然需要我們支持Internet Explorer 11。雖然在大多數(shù)情況下我都可以接受漸進增強方法（例如，為不支持CSS Grid的瀏覽器提供更簡單的回退布局），但我發(fā)現(xiàn)主題設計是一個通常不允許輕松妥協(xié)的領域?？蛻粝Ｍ吹剿麄兊钠放祁伾妥煮w，即使是在舊版瀏覽器上也是如此。使用特性查詢提供回退將需要大量額外的工作，這將抵消使用自定義屬性的好處。為了克服這個問題，我們需要一個polyfill。

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

postcss-custom-properties

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

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

處理后的結(jié)果將是：

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

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

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

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

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

ie11CustomProperties

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

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

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

但這與Tailwind有什么關系？

正如我們已經(jīng)看到的，實用程序類——可以在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-前綴，以便很明顯它們與主題設計特別相關，但您可以隨意使用任何適合您的約定。

現(xiàn)在，我們可以通過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上定義的變量）的組件。第二個具有我們的藍色主題。唯一的區(qū)別是在組件上添加了.th-blue類。（為了簡潔和清晰，我又省略了與主題無關的類。）

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

使用配置作為樣式指南

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

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

總結(jié)

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

以上是用CSS自定義屬性和尾風為主題染色的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！