CSSのカスタムプロパティの命名規則は？

CSSのカスタムプロパティは、変数のように値を格納し、再利用できる便利な機能です。しかし、その命名規則には、いくつかの重要なポイントがあります。この記事では、カスタムプロパティの命名規則と、効果的な命名方法について解説します。

カスタムプロパティの作り方

カスタムプロパティの名前には必ず、接頭辞（プレフィックス）として「--（ハイフンふたつ）」を付ける決まりがあります。CSSプロパティに値を指定するのと同じ要領で、--で始まるカスタムプロパティ名を:（コロン）で区切ってそのあとに、指定する値を書きます。


:root {
  --main-color: #f06;
  --accent-color: #09c;
}

カスタムプロパティの名前は、後から見て分かりやすいものにすることが重要です。具体的には、以下の点に注意しましょう。

カスタムプロパティの名前は、それが何の値を表しているのか、一目でわかるようにしましょう。例えば、メインカラーを表す場合は「--main-color」、フォントサイズを表す場合は「--font-size-large」のように、具体的な意味を持つ単語を使いましょう。

良い例	悪い例
`--main-color`	`--color1`
`--font-size-heading`	`--fs-h`

プロジェクト全体で、同じような意味を持つカスタムプロパティには、同じ命名規則を使いましょう。例えば、色を表すカスタムプロパティは全て「--[色名]-color」のように統一することで、可読性が向上します。

カスタムプロパティは、宣言された場所によって適用範囲が異なります。:root要素で宣言されたカスタムプロパティはグローバルに適用されますが、特定の要素で宣言された場合は、その要素とその子要素にのみ適用されます。スコープを意識して、適切な場所でカスタムプロパティを宣言しましょう。

カスタムプロパティ名は、ハイフンケースで記述するのが一般的です。複数の単語を組み合わせる場合は、単語と単語の間をハイフンでつなぎます。

良い例	悪い例
`--main-color`	`--mainColor`
`--font-size-heading`	`--fontSizeHeading`

カスタムプロパティの命名規則は、コードの可読性や保守性を向上させる上で非常に重要です。この記事で紹介したポイントを参考に、分かりやすく、一貫性のある命名を心掛けましょう。

A1: カスタムプロパティはCSSネイティブの機能であり、ブラウザで直接解釈されます。一方、SassなどのCSSプリプロセッサの変数は、コンパイル時に値が置き換えられます。カスタムプロパティは、JavaScriptから動的に値を変更できるなど、柔軟性が高い点が特徴です。

A2: カスタムプロパティを使うことで、値の再利用や一括変更が容易になり、コードの可読性や保守性が向上します。また、JavaScriptから値を動的に変更できるため、インタラクティブな表現を実現することも可能です。

A3: カスタムプロパティは、主要なブラウザで広くサポートされていますが、古いブラウザではサポートされていない場合があります。古いブラウザへの対応が必要な場合は、Can I Useなどのサイトでサポート状況を確認する必要があります。

その他の参考記事:jquery css 複数