【CSS Modules】dashed-ident型の使い方
dashed-ident型の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
dashed-ident定数は、CSSにおいてハイフンを含む識別子（identifier）の形式を表す定数です。
この識別子は、英字、数字、アンダースコア（_）、ハイフン（-）で構成されますが、ハイフンのみで始まってはいけないという規則があります。ただし、二つのハイフン（--）で始まる場合はCSSカスタムプロパティ名として特別に許可されます。CSSでは、さまざまな要素に名前を付ける際にこのdashed-identの形式が用いられます。
具体的には、カスタムプロパティ（CSS変数）の名前として--my-variableのように使用されるほか、@keyframesルールで定義するアニメーションの名前、grid-template-areasプロパティで指定するグリッド領域の名前などに適用されます。これらの名前は、CSSコード内で特定の機能や値を一意に識別するために重要な役割を果たします。
特にCSS Modulesのようなモジュール化された開発手法では、コンポーネントごとのスタイルをローカルスコープ化する際に、開発者が記述するクラス名やアニメーション名がこのdashed-identの規則に従っていることが一般的です。CSS Modulesは、これらの識別子に基づいてユニークなクラス名を生成し、スタイル衝突を防ぐ仕組みを提供します。このように、dashed-identはCSSの命名規則の基本となる概念の一つであり、柔軟かつ構造的なスタイル記述を可能にします。
公式リファレンス: <dashed-ident>
構文(syntax)
1--my-custom-property: value;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません