【CSS Modules】@scopeアットルールの使い方
@scopeアットルールの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
@scopeモジュールは、CSSのスタイルルールを特定のDOMツリーの範囲に限定し、まとめる単位です。従来のCSSのグローバルな特性によるスタイル衝突の問題を、スタイルの影響範囲を明確に定義することで解決します。
この機能は、Webコンポーネントや大規模なアプリケーションにおいて、スタイルをコンポーネント内部にカプセル化するのに有効です。例えば、@scope内で定義されたスタイルは、そのコンポーネントの要素とその子孫にのみ適用され、外部要素には影響を与えません。これにより、独立したコンポーネント開発を容易にし、異なるコンポーネント間でのセレクタ名衝突の心配をなくします。
さらに、@scopeは適用範囲の開始点と終了点を詳細に指定する構文も提供しており、柔軟なスタイル適用範囲の制御を可能にします。特定のUI要素内部や、セクション内でのみスタイルを有効にするなど、細やかな調整が可能です。結果として、CSSコードの保守性が向上し、変更や拡張における既存スタイルへの影響を最小限に抑え、システム全体の安定性を高めます。
公式リファレンス: @scope
構文(syntax)
1@scope (.card) to (.card-footer) { 2 h2 { 3 color: var(--card-title-color, #333); 4 } 5 6 p { 7 font-size: 0.9em; 8 } 9}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません