CSSカスタムプロパティとテールワインドを使用したカラーテーマ

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

トピックの概要

タイトル、ボディ、およびボタンを含む「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 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またはその他の前処理者を使用する場合、変数を使用して作業を簡素化することができます。コードをより簡潔にするわけではありませんが、これらの値を1つの場所に更新することにより、コードをより管理しやすくします。

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

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

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

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

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

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

 <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--ブルーなど）よりもコード作成の取り組みを節約できます。

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

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

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

PostCSS-Custom-Properties

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

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

処理後の結果は次のとおりです。

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

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

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

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

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

IE11CustomProperties

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

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

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

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

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

色は構成ファイルで定義できます。

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

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

これで、これらのクラスを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に適用しましょう。最初の例では、デフォルトのテーマ（ルートで定義された変数）を持つコンポーネントを提供します。 2番目には青いテーマがあります。唯一の違いは、.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のテーマオブジェクトにアクセスできます。

 <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 中国語 Web サイトの他の関連記事を参照してください。