内部使用のために CSS で変数を作成するにはどうすればよいですか?

内部使用のために CSS で変数を作成する

CSS の領域では、共通の値、つまり「テーマ カラー」を再利用する機能は長年の課題でした。 CSS には単一のスタイルシート内で変数を定義するための固有のメカニズムはありませんが、この機能を実現する賢い方法があります。

1 つの手法では、特定のスタイルを個々の要素に適用する従来のアプローチを反転します。代わりに、概念的に類似した要素に適用されるスタイルをグループ化します。例:

<code class="css">/* Theme color: text */
H1, P, TABLE, UL {
  color: blue;
}

/* Theme color: emphasis */
B, I, STRONG, EM {
  color: #00006F;
}</code>

これにより、すべてのテキスト要素とすべての強調された要素に同じ色が適用されます。

概念的なグループ化が最も重要であることに注意することが重要です。値は特定のインスタンスでは同一である可能性がありますが、将来も常に同一であるとは限りません。スタイルの根本的な意味に注目して、将来変更を加える際の潜在的なエラーを回避します。

真の可変システムではありませんが、この戦略は繰り返しを効果的に減らし、簡潔で保守可能な CSS コードを可能にします。

以上が内部使用のために CSS で変数を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。