CSSに問題がないか、保守性・複雑性・パフォーマンスの面から解析し、改善点を教えてくれるツール -CSS Code Quality Analyzer
Post on:2025年9月18日
sponsorsr
Webサイトに使用されているCSSをはじめ、自分で書いたCSSに問題がないか解析し、改善点を教えてくれる無料ツールを紹介します。
CSSは、保守性、複雑性、パフォーマンスの面から解析され、問題がある箇所はどのように改善するればよいかも教えてくれます。
CSS Code Quality Analyzer
CSS Code Quality Analyzer -GitHub
使い方は簡単です。
「URL to analyze」に解析したいページのURLを入力して、「Analyze URL」をクリックするだけです。
今回は、当ブログのCSSを解析してみました。「Prettify CSS」のチェックを入れると、整形したCSSも生成されます。
CSSはハイレベルで分析され、3項目に分かれたスコアが算出されます。
- Maintainability: 保守性、CSSを高レベルで確認した人がバグを修正する正確な場所を見つけるのがどの程度難しいか。
- Complexity: 複雑性、変更を加えた後に副作用なく変更できると確認するのはどの程度難しいか。
- Performance: パフォーマンス、高レベルの指標に基づいてCSSがパフォーマンスに悪影響を与える可能性はどの程度か。
保守性・複雑性・パフォーマンスのスコア
スコアの内訳はそれぞれ個別に解説されます。
まずは、問題なしと判断された箇所。
@importを使用しない（パフォーマンスが悪く）- セレクタコードの重複（ファイルサイズの肥大化）
- CSSのファイルサイズ（大きいとページの速度が低下）
!importantの使用（詳細度の問題を回避）
これらは、問題なしでした。
問題なしと判断された箇所
続いて、問題ありと判断された箇所。
- 1つのルールセットに多数の宣言を含める
1つのルールセットに含める宣言の数は、少なく抑えるべきです。宣言の数が多いとルールセットのスキャンが困難になります。宣言の数は、最大47個を目安にしてください。
私の場合、CSSを見るとWordPressで使用しているプラグインのCSSでした。
1つのルールセットに多数の宣言を含める
- 空のルールセット
- CSSコメント
空のルールセットは、スタイル設定に一切影響しないため、削除してください。空のルールセットを残しておくと、ページ自体には影響はありませんが、ネットワーク経由で転送する必要があるため、ページの表示速度がわずかに低下します。
CSSのコードにコメントを記述するのは良いことですが、ユーザーにコメントを提供するのは良いことではありません。コメント付きのCSSはユーザーへのメリットがないだけでなく、ファイルサイズが大きくなるため、ファイルの受信速度が低下します。
これも、プラグインのCSSでした。
空のルールセット、コメント
- 1つのルールセットに多数のセレクタを含める
1つのルールセットに含めるセレクタの数は少なく抑えましょう。セレクタの数が多いと、ルールセットのスキャンが困難になり、適切なセレクタを見つけるのが難しくなる可能性があります。
これは、アイコンフォントのCSSでした。
1つのルールセットに多数のセレクタを含める
- セレクタの複雑度
セレクタの複雑度は、詳細度の問題や異なるセレクタの命名規則によってデベロッパーが混乱することを避けるために、一貫性を保つ必要があります。このスコアが高い場合、CSSでもっとも一般的なセレクタよりも複雑なセレクタが多数存在することを意味します。
これもプラグインのCSSでした。
セレクタの複雑度
- 複雑なセレクタ
複雑度が高いということは、セレクタが複数の部分で構成され、それぞれの部分がセレクタの対象を理解するのが複雑であることを意味します。複雑度が低いということは、デベロッパーにとって理解しやすいことを意味します。
*:where(:not(iframe, img, video, canvas, svg))、、、複雑なのかな？
複雑なセレクタ
- 宣言の重複
CSSの不整合を避けるため、セレクタのリストの長さは一定かる短くする必要があります。不整合があるとデバッグが困難になる可能性があります。このスコアが高いということは、CSSで一般的な長さよりも長いセレクタのリストがあることを意味します。
これもプラグインのCSSでした。
宣言の重複
- セレクタの複雑さを低く保つ
セレクタの複雑度が低いということは、セレクタがシンプルであることを意味します。複雑度が高いということはセレクタが複数の部分で構成されており、それぞれの部分がセレクタの対象を理解するのが複雑だあるということを意味します。
ここも:where()がひっかかりました。
セレクタの複雑さを低く保つ
- IDセレクタを避ける
詳細度の問題を回避するには、CSSのIDセレクタの量を少なくします。
IDセレクタを避ける
最後に、これらの問題を改善したCSSも生成されます。
問題を改善したCSS
sponsors
