CSSカスタムプロパティの未参照変数を調べる方法

CSSテキストを入力すると、認識されたカスタムプロパティの宣言、名前ごとのvar()参照数、参照のない宣言を確認できます。空の入力では分析は成功しません。

概要と用途

CSSのカスタムプロパティを整理するときは、宣言されている名前と、var() から参照されている名前を分けて確認すると、使われていない候補を見つけやすくなります。このツールは、入力したCSSテキストから認識できるカスタムプロパティ宣言を取り出し、名前ごとの参照数を数え、参照がない宣言を特定します。CSS全体の妥当性を検証するのではなく、変数の宣言と参照の対応を確認するための補助として使うのが適しています。

使い方の手順

1. 分析したいCSSテキストを用意します。入力では、カスタムプロパティを --theme-color: #333; のように、名前、コロン、値、セミコロンの順で記述します。値の前後にある空白は整理して扱われます。

2. CSSテキストを入力欄に貼り付けます。入力が2種類ある場合は、空でないテキスト入力がもう一方のCSS入力より優先されます。入力を省略した場合の既定値は空の文字列ですが、選択された入力が空だと処理は成功しません。

3. 分析を実行します。var(--theme-color) のような参照が名前ごとに数えられます。参照の括弧内に任意の内容があっても、認識された変数名の参照として扱われます。

4. 結果を確認します。成功時は、認識された宣言の一覧、宣言数、参照がない宣言数、そして変数名ごとの参照数が示されます。宣言名と参照名を照合し、対応する参照がない宣言を未参照として確認します。

結果の読み方

宣言一覧では、認識されたカスタムプロパティ名と、空白を取り除いた値を確認します。宣言数は認識された宣言の合計、未参照宣言数は参照名と一致しなかった宣言の合計です。参照数は名前ごとに表示されるため、同じ変数が複数回使われているかも確認できます。

未参照として表示された宣言は、不要とは限りません。別のCSS、動的に組み立てられるスタイル、またはこのツールが認識しない書き方から参照されている可能性があります。したがって、削除前にプロジェクト全体の利用箇所を別途確認してください。入力が空の場合や処理中に問題が起きた場合は、成功した分析結果ではなく失敗として扱われます。

使用例

テーマ色と余白をカスタムプロパティで管理し、--accent: #06c; --gap: 1rem; を宣言して、本文中で var(--accent) だけを使っているCSSを確認します。

CSSテキストを入力して分析を実行し、宣言一覧と名前ごとの参照数を照合します。

成功時の結果には、認識された2件の宣言の一覧、宣言数、未参照宣言数、--accent と --gap それぞれの参照数が含まれます。

制限事項

• 判定対象は認識された宣言と参照に限られます。未参照と表示されても、CSS全体での利用がないことを直ちに意味するとは限らないため、削除前に別の利用箇所も確認してください。

よくある間違い

• CSSを貼り付けずに実行すると、選択された入力が空のため成功しません。分析対象のCSSテキストを入力してから、もう一度実行してください。

よくある質問

空のCSSでも分析できますか？

選択されたCSS入力が空の場合は成功しません。CSSテキストを入力してから分析してください。

未参照のカスタムプロパティはどう判定されますか？

認識された宣言名と、認識されたvar(--name)の参照名が一致しない宣言が、未参照として特定されます。

結果には何が表示されますか？

成功時には、認識された宣言の一覧、宣言数、未参照宣言数、名前ごとの参照数が示されます。