4 つのクラスのうち 1 つが未使用
btn・card・title・unused の 4 クラスを持つ CSS と、3 つだけを使う HTML の例です。未使用の候補が 1 件出る代表例です。
入力
CSS
.btn{color:red}.card .title{margin:0.5em}.unused{x:1}HTML(クラスの突き合わせ用。空ならクラスの一覧だけ)
<div class="card"><h1 class="title btn">x</h1></div>
結果
エラー 0 件・警告 1 件・情報 0 件
指摘(エラー・警告・情報)
- 警告 CSS .unused は貼り付けた HTML の class 属性に見つかりません。スクリプトで付くクラスや別のページで使うクラスなら未使用ではありません。
| CSS のクラス | 4 種類 |
|---|---|
| 未使用の候補 | 1 種類 |
| media の幅の条件 | 0 種類 |
クラスと幅の一覧
| 種類 | 名前・条件 | CSS での出現 | 状態 |
|---|---|---|---|
| クラス | .btn | CSS に 1 回 | HTML で 1 回使用 |
| クラス | .card | CSS に 1 回 | HTML で 1 回使用 |
| クラス | .title | CSS に 1 回 | HTML で 1 回使用 |
| クラス | .unused | CSS に 1 回 | 未使用の候補 |
検算(この結果になる理由)
宣言の中の 0.5em の「.5」はクラスとして数えません。CSS のクラスは btn・card・title・unused の 4 つで、HTML の class 属性に出るのは card・title・btn なので、unused だけが未使用の候補になります。
判定の根拠は仕様と根拠に、仕様の出典とともにまとめています。自分の入力で試すにはツールをお使いください。
このツールの制約
- スクリプトで後から付けるクラス(classList の追加など)や、別のページだけで使うクラスは判定できません。「未使用の候補」は削除してよいという意味ではありません。
- クラス名のエスケープ(.sm\:flex のような書き方)、属性セレクタ [class~=x]、CSS の入れ子の展開には対応していません。
- HTML の class 属性との細かい一致規則(ページのモードによる大小の扱いなど)は、このツールでは区別せず、大文字小文字を区別する単純な比較にしています。
- CSS を書き換えたり、不要な部分を自動で削除したりはしません。一覧を見て自分で判断してください。
ご利用にあたって
- 結果は候補です。削除する前に、ビルド後の全ページとスクリプトで使われていないことを確認してください。
- クラスの細かい一致規則は単純な文字列比較で近似しています。