Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【CSS Modules】prefixアットルール記述子の使い方

prefixアットルール記述子の使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

prefixプロパティは、CSS Modulesにおいて、自動的に生成されるCSS識別子(クラス名やアニメーション名など)の接頭辞を定義する設定値を保持するプロパティです。

CSS Modulesは、グローバルなCSS命名衝突を回避するため、各CSSファイルで定義された識別子をユニークな名前に自動変換します。このprefixプロパティは、その自動生成される識別子の先頭に特定の文字列を付与するために使用されます。

例えば、prefixapp-と設定した場合、.myClass_hashのようなクラス名が.app-myClass_hashのように生成されます。これにより、開発者は生成された識別子を見ただけで、それがどのアプリケーションやコンポーネントに由来するかを直感的に判断できます。

この機能は、特に大規模なプロジェクトで、コードの可読性とメンテナンス性を大幅に向上させます。prefixプロパティは通常、CSS Modulesのビルド設定ファイル内で指定され、CSSの管理を効率化する重要な役割を担います。

公式リファレンス: prefix

構文(syntax)

1prefix

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

関連コンテンツ