CSS 変数について知らないこと - 命名規則と値の割り当て

CSS 変数を調査する中で、一見しただけでは必ずしも明らかではない、多くの興味深い可能性と微妙な詳細を発見しました。多くの開発者と同様に、私も最初は単純かつ直接的な方法で CSS 変数を使用し、エッジ ケースに遭遇することはほとんどありませんでした。このアプローチは一般的であり、多くの目的に効果的ですが、探索し実験すべきことはさらにたくさんあることを意味します。私の考えでは、CSS 変数の命名規則と有効な値の割り当てを深く理解することで、アプリケーションの範囲と柔軟性を大幅に拡大できると考えています。

CSS 変数についてより徹底的かつ包括的に説明することを目的として、私の調査と洞察をここにまとめました。この記事が、あなたと私両方が CSS 変数の可能性を最大限に引き出し、スタイリングの新しい可能性を発見するのに役立つリソースになれば幸いです。

このシリーズは、読者が --name: value 構文や var(--name) 関数などの CSS 変数の基本をすでに理解していること、または基本的な概念に慣れていることを前提としています。この CSS 変数の概要の最初の 3 分の 1 で説明します。

命名規則

CSS 変数を使用する場合、名前を付けることが最初の重要なステップです。 CSS 変数に名前を付けるための重要なガイドラインをいくつか示します:

基本プレフィックス

すべてのカスタム プロパティ名は、--main-color のように 2 つのハイフン (--) で始まる必要があります。この接頭辞は、ブラウザーがカスタム プロパティとネイティブ CSS プロパティを区別するのに役立ち、競合の可能性を減らします。

大文字と小文字の区別

CSS カスタム プロパティ名は大文字と小文字が区別されます。つまり、--main-color と --Main-Color は 2 つのまったく異なる変数として扱われます。大文字と小文字が一致しない変数を誤って参照し、解析エラーにつながる可能性があることを避けるために、コード全体で大文字と小文字の一貫性を維持することが重要です。

例:

   :root {
     --main-color: blue;
     --Main-Color: red; /* Case difference, treated as a separate property */
   }

   .box1 {
     color: var(--main-color); /* Refers to --main-color, resulting in blue */
   }

   .box2 {
     color: var(--Main-Color); /* Refers to --Main-Color, resulting in red */
   }

予約語:

スタンドアロン -- 予約されており、将来の仕様で特定の目的を持つ可能性があります。したがって、カスタム プロパティ名として使用することは避けてください。
例:

   :root {
     --: green; /* Invalid: a standalone -- is reserved */
     --custom-color: green; /* Valid: custom property avoids reserved name */
   }

   .text {
     color: var(--custom-color); /* Uses the custom property */
   }

命名制限:

CSS 変数に名前を付けるときは、可読性を向上させ、競合を防ぐために、許可される文字と規則を考慮することが重要です。

1. 使用できる文字:
   • アルファベット文字: 大文字と小文字の英字 (A ～ Z、a ～ z)
   • 数字: 0-9
   • ハイフン: -
   • アンダースコア: _
   • Unicode 文字: 絵文字または非ラテン文字 (Unicode 範囲 U 0080 以上)
2. 特殊文字のエスケープ: 変数名に特殊文字 (& や ? など) が含まれている場合は、エスケープ文字 () または Unicode コードを使用して表すことができます。たとえば、& は 26 と記述できます (詳細については、「構文と基本データ型 - 文字と大文字小文字の区別」を参照してください)。
3. 可変長: 変数名の長さに厳密な制限はありませんが、読みやすさを考慮して、名前を 50 文字未満にすることをお勧めします。 Chromium で実験してみましたが、最大 100 万文字までの変数名の長さをサポートできます。

例
次の例は、CSS 変数の名前付けの柔軟性と特殊文字を適切に処理する方法を示しています。

   :root {
     --main-color: blue;
     --Main-Color: red; /* Case difference, treated as a separate property */
   }

   .box1 {
     color: var(--main-color); /* Refers to --main-color, resulting in blue */
   }

   .box2 {
     color: var(--Main-Color); /* Refers to --Main-Color, resulting in red */
   }

値の割り当て

CSS 変数はさまざまなタイプの値を保持できますが、特定の構文ルールに従う必要もあります。有効な値の割り当ての例をいくつか見てみましょう:

   :root {
     --: green; /* Invalid: a standalone -- is reserved */
     --custom-color: green; /* Valid: custom property avoids reserved name */
   }

   .text {
     color: var(--custom-color); /* Uses the custom property */
   }

これらの例が示すように、CSS 変数は幅広い値をサポートします。ただし、CSS 変数は CSS プロパティの一部であるため、引用符や括弧の一致など、一般的な CSS 構文に従う必要があります。これらの要件を満たさない値をいくつか調べてみましょう。

無効な値

CSS 変数に無効な値を割り当てると、解析エラーが発生し、後続のスタイルで問題が発生する可能性があります。無効な値の割り当ての例をいくつか示します:

   :root {
     /* Naming with Unicode characters */
     --primary-color: #3498db;
     --secondary-color: #e74c3c;

     /* Using an Emoji as a variable name */
     --?: #2ecc71;

     /* Special characters with escape sequences, resulting in --B&W? */
     --B\&W\?: #2ecc72;

     /* Using Unicode escape codes, equivalent to --B&W? */
     --BWF: #abcdef;
   }

   .container {
     color: var(--BWF); /* Result is #abcdef */
   }

   .container-alt {
     color: var(--B\&W\?); /* Result is #abcdef */
   }

!重要な使用法

CSS 変数は、他の CSS プロパティと同様に、優先度に影響する ! important フラグをサポートしています。以下は、! important が変数の優先順位にどのような影響を与えるかを示す例です:

:root {
  --foo: if(x > 5) this.width = 10;
  --string-with-semicolon: "font-size: 16px;"; /* Strings can include semicolons */
  --complex-calc: calc(100% / 3 + 20px);       /* Complex calculations with calc() */
  --negative-value: -10px;                     /* Negative values */
  --multiple-values: 10px 20px 30px 40px;      /* Multiple values, e.g., for margin or padding */
  --unitless-number: 1.5;                      /* Unitless numbers */
  --nested-var: var(--string-with-semicolon);  /* Nested variables using var() */
  --empty-string: ;                            /* Empty string */
  --color: rgba(255, 0, 0, 0.5);               /* Color functions */
  --special-chars: "Content: \"Hello\"";       /* Strings with special characters */
}

この例では、#target と .cls の両方が div の --text-color 変数に影響します。セレクターの特異性により、#target は .cls をオーバーライドする必要があります。ただし、.cls の --text-color では ! important が使用されているため、div に適用される最終的な色は緑色になります。 ! important は変数間の優先順位にのみ影響し、変数を参照するプロパティには反映されないことに注意することが重要です。結果の色は単に緑色であり、緑色ではありません!重要です。

イニシャルを使用する

   :root {
     --main-color: blue;
     --Main-Color: red; /* Case difference, treated as a separate property */
   }

   .box1 {
     color: var(--main-color); /* Refers to --main-color, resulting in blue */
   }

   .box2 {
     color: var(--Main-Color); /* Refers to --Main-Color, resulting in red */
   }

CSS 変数値としてイニシャルを使用するのは独特の動作です。変数に代入すると、initial によって変数が無効になり、var() でアクセスすると失敗します。これは、プロパティが無効になることのない空の値 (--empty: ;) とは異なります。イニシャルを使用すると、変数が効果的に「リセット」され、その定義がキャンセルされます。 (参考)

依存関係のサイクル

CSS 変数は他の変数の参照をサポートしていますが、依存関係のサイクルが発生すると、サイクル内のすべての変数が無効になります。以下は依存関係サイクルの例です:

   :root {
     --: green; /* Invalid: a standalone -- is reserved */
     --custom-color: green; /* Valid: custom property avoids reserved name */
   }

   .text {
     color: var(--custom-color); /* Uses the custom property */
   }

この例では、--one、--two、および --three が相互に参照し、サイクルを作成します。その結果、循環依存関係により 3 つの変数すべてが無効になり、解決できなくなります。 (参考)

結論

この記事では、CSS 変数の名前付けと値の割り当てのルールを詳しく説明し、一般的な解析エラーを回避しながらこれらの変数を適切に定義および管理する方法について説明しました。この基礎知​​識があれば、今後の開発プロジェクトで CSS 変数をより効果的に使用できるようになります。

次の記事では、var() を使用して CSS 変数値を取得する方法と、CSS 変数をより柔軟かつ強力に使用できるようにする具体的なアプリケーション シナリオについて説明します。

以上がCSS 変数について知らないこと - 命名規則と値の割り当ての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。