CSSカスタムプロパティは、コード効率を改善するだけでなく、CSS、特にテーマデザインでより多くの可能性を生み出します。 Atomic Smashチームは、Tailwind CSS（ユーティリティクラスフレームワーク）を使用します。この記事では、テーマデザインにカスタムプロパティを使用する方法と、コードの再利用性を最大化するためにTailwindと統(tǒng)合する方法について説明します。この記事では、Tailwindの紹介については説明しません - 公式ドキュメントを確認(rèn)してください - しかし、Tailwindを初めて使用している場(chǎng)合でも、いくつかのヒントが役立つ場(chǎng)合があります。

トピックの概要

タイトル、ボディ、およびボタンを含む「CTA」コンポーネントがあるとします。

この配色のために通常の（尾のない）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>私たちの新製品を最初に知るようにしてください</p>
  登録する</div>
</div></code>

基本的な配色とは関係のないクラスを意図的に省略しましたが、このデモの完全な例を見ることができます。

これで、コンポーネントに別の配色を適用する場(chǎng)合は、元のコンポーネントの色値をオーバーライドする必要があります。 Tailwindがない場(chǎng)合、一般的なアプローチは、テーマクラスをコンポーネント自體に接続し、カスケードの色値を再定義することです。したがって、「.cta - blue」（BEMコンベンションを使用）モディファイアクラスのコンポーネントについては、青色の配色のCSS値を適用します。

 <code>.cta--blue { background-color: #2a4365; // 深藍(lán)色} .cta--blue .cta__heading { background-color: #3182ce; // 中等藍(lán)色 color: #2a4365; } .cta--blue .cta__button { background-color: #3182ce; }</code>

SASSまたはその他の前処理者を使用する場(chǎng)合、変數(shù)を使用して作業(yè)を簡(jiǎn)素化することができます。コードをより簡(jiǎn)潔にするわけではありませんが、これらの値を1つの場(chǎng)所に更新することにより、コードをより管理しやすくします。

ここで、最近プロジェクトで経験したように、10種類の配色があるとしましょう。これらの色の値を変更する前に基本的に上記の例を10回繰り返したため、コードはより長(zhǎng)くなり始めます。ここで、設(shè)計(jì)システムの各コンポーネントには10??の配色が必要であり、多くのコンポーネントが単純なCTAよりもはるかに複雑であると想像してください。たぶん、私たちのテーマにもさまざまなフォントが必要です。突然、多くのCSSを書く必要があります。

テーマデザインにはテールウィンドを使用します

一方、Tailwindを使用する場(chǎng)合、HTML自體の複數(shù)のクラスを変更する必要があります。 JavaScriptフレームワーク（ReactやVueなど）を使用しても、これは簡(jiǎn)単な作業(yè)ではありません。制作バージョンで未使用のスタイルが削除されるようにするために、Tailwindは文字列の連結(jié)の使用を妨げてクラス名を作成します（執(zhí)筆時(shí)點(diǎn)で）。したがって、トピックを構(gòu)築することは、コンポーネントに多くのロジックを追加することを意味する場(chǎng)合があります。

テーマデザインにカスタムプロパティを使用します

色のテーマにカスタムプロパティを使用することにより、記述する必要があるコードの量を大幅に削減し、メンテナンスの負(fù)擔(dān)を減らすことができます。まず、通常のCSSでこれを行う方法を見てみましょう。

カスタム屬性をルートセレクターの変數(shù)として定義し、グローバル変數(shù)にします。 （ボディセレクターも適用されます。）これらの変數(shù)を使用して、セレクターの色屬性値を置き換えることができます。

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

これは本當(dāng)に魔法のような場(chǎng)所です。現(xiàn)在、各トピックのコードを作成するには、これらのカスタム屬性値を更新する必要があります。テーマクラスをどこに適用しても、新しい値は継承されます。

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

青い配色が必要な場(chǎng)合は、コンポーネントに.th-blueクラスを適用できます。タグで使用して、ページ全體のテーマを適用し、必要に応じて個(gè)々のコンポーネントに上書きします。ユーティリティクラスを使用すると、コードベースのどこにでも適用できるため、コンポーネント固有のクラス（元のコードでは.cta--ブルーなど）よりもコード作成の取り組みを節(jié)約できます。

レガシーブラウザを処理します

多くの機(jī)関と同様に、多くのアトミックスマッシュの顧客は、インターネットエクスプローラー11のサポートを依然として必要としています。ほとんどの場(chǎng)合、プログレッシブエンハンスメント方法を受け入れることができますが（たとえば、CSSグリッドをサポートしないブラウザーにシンプルなフォールバックレイアウトを提供することができます）、テーマデザインは通常簡(jiǎn)単な雑種を許さない領(lǐng)域であることがわかりました。顧客は、古いブラウザでも、ブランドの色やフォントを見たいと思っています。機(jī)能クエリでフォールバックを提供するには、多くの追加作業(yè)が必要であり、カスタムプロパティを使用することの利點(diǎn)を相殺します。この問題を克服するには、ポリフィルが必要です。

IE 11にカスタムプロパティにポリフィルを提供するいくつかのオプションがあります。

PostCSS-Custom-Properties

1つ目は、PostCSS-Custom-Propertiesと呼ばれるPostCSSプラグインを使用することです。ワークフローで既にPostCSを使用している場(chǎng)合、このプラグインを追加するのはかなり簡(jiǎn)単です。 CSSを処理し、変數(shù)の結(jié)果をプロパティ値として出力することで機(jī)能します。したがって、次のCSSがある場(chǎng)合：

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

処理後の結(jié)果は次のとおりです。

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

カスタムプロパティをサポートしないブラウザは、2番目のルールを無視し、通常のプロパティ値に戻ります。また、出力からカスタムプロパティを使用してルールを削除するオプションもあるため、ファイルサイズは小さくなります。これは、ブラウザがカスタムプロパティを取得しないことを意味します。変數(shù)を動(dòng)的に更新する場(chǎng)合は問題ですが、それらを悪影響なしでコードの靜的値に使用できます。

殘念ながら、このポリフィルにはいくつかの制限があります。

1. 構(gòu)成內(nèi)のカスタムプロパティを定義するファイル（またはファイル）を指定する必要があります。
2. カスタムプロパティは、ルートセレクターでのみ定義できます。

最初の制限は比較的些細(xì)なものですが、殘念ながら2つ目は、このポリフィルをトピック設(shè)計(jì)のユースケースでは完全に役に立たなくします。これは、セレクターの変數(shù)を再定義してトピックを作成できないことを意味します。

IE11CustomProperties

このポリフィルオプションには、CSSを前処理する代わりにクライアントスクリプトを提供することが含まれます。次のスクリプトを頭に追加して、ポリフィルがIE 11でのみロードされていることを確認(rèn)できます。

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

これにより、ここの例のようにカスタムプロパティを活用できるため、これが私が使用することにしたソリューションです。スタイル屬性に設(shè)定されたカスタムプロパティは、ポリフィルされないという制限があります。しかし、上記のトピック設(shè)計(jì)の例に対してテストしましたが、正常に動(dòng)作します。

しかし、これはTailwindと何の関係がありますか？

これまで見てきたように、ユーティリティクラス（HTMLのどこにでも適用できる1つの目的のクラス）は、コードをより再利用可能にすることができます。これは、Tailwindおよびその他のユーティリティクラスフレームワークの主要なセールスポイントです。配信するCSSファイルのサイズは、結(jié)果として最終的に小さくなります。 Tailwindは複數(shù)の色のクラスを提供します：.bg-Red-Mediumは、赤い背景色のプロパティ値を提供します。Text-Red-Mediumは、色、ボーダー、ボックスシャドウ用、または色の値が必要な場(chǎng)所を考えることができる場(chǎng)所です。

色は構(gòu)成ファイルで定義できます。

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

Tailwindクラスにカスタムプロパティ値を使用する場(chǎng)合は、構(gòu)成でそれらを指定できます。

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

主題関連のクラス名をプレフィックスしたので、それらが特にサブジェクトデザインに関連していることは明らかですが、自分に合ったコンベンションを自由に使用できます。

これで、これらのクラスをTailwindを使用して使用できます。 .bg-th-primaryを使用することは、執(zhí)筆と同等です。

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

CSSでは、以前と同じようにテーマのカスタムプロパティを定義できます。

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

これらのクラスをHTMLに適用しましょう。最初の例では、デフォルトのテーマ（ルートで定義された変數(shù)）を持つコンポーネントを提供します。 2番目には青いテーマがあります。唯一の違いは、.th-Blueクラスがコンポーネントに追加されたことです。 （簡(jiǎn)単にし、明確にするために、トピックに関係のないクラスを省略しました。）

<code><div class="bg-th-primary text-white">
<h3 class="bg-th-secondary text-th-primary"> メーリングリストに參加してください</h3>
<div>
<p>私たちの新製品を最初に知るようにしてください</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>私たちの新製品を最初に知るようにしてください</p>
<button class="bg-th-secondary">登録する</button>
</div>
</div></code>

スタイルガイドとして構(gòu)成を使用します

Tailwindは、構(gòu)成內(nèi)のすべての変數(shù)を定義することをお?jiǎng)幛幛筏蓼?。個(gè)人的には、これがより良いアプローチであることに同意します。これは、構(gòu)成ファイルが、色やその他のテーマ値を定義するための複數(shù)の場(chǎng)所で終わるのではなく、単一の事実源になる可能性があることを意味します。幸いなことに、カスタムプロパティにTailwind構(gòu)成ファイルの値を使用することもできます。最初に構(gòu)成內(nèi)のすべての色を定義する必要があります（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のテーマオブジェクトにアクセスできます。

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

要約します

ブラウザのサポートを心配することなくカスタムプロパティを使用できることをとてもうれしく思います。既存のワークフローとシームレスに統(tǒng)合できることをさらに嬉しく思います。彼らがテーマデザインの観點(diǎn)から私たちを救う時(shí)間を誇張するのは難しいです。あなたがTailwindユーザーでなくても、この記事がこのユースケースのカスタムプロパティを試すことを奨勵(lì)することを願(yuàn)っています。

以上がCSSカスタムプロパティとテールワインドを使用したカラーテーマの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。