CSSを監査するためのツール

CSSコード監査は、開発者の毎日のタスクの一般的なタスクではありませんが、場合によっては行う必要があります。これは、重要なCSSを特定し、未使用のセレクターを削減するためのパフォーマンス評価の一部である可能性があります。また、アクセシビリティを改善し、コードベースで使用されるすべての色でコントラスト評価を実行することもできます。一貫性を実施することさえできます！

何らかの理由で、そしてこれが起こったとき、私は通常、この記事で説明されているいくつかのツールを使用します。しかし、ツールを導入する前に、まず「監査された」CSSの意味を理解しましょう。

CSS監査は簡単ではありません

通常、コード監査では、コードを分析して、パフォーマンスの問題の可能性などのエラーやその他の不規則性を見つけることが含まれます。ほとんどのプログラミング言語では、コード監査の概念は比較的簡単です。コードは有効または無効です。しかし、CSSは特別な言語であり、そのエラーはブラウザによってほとんど無視されます。さらに、同じスタイルをさまざまな方法で実装できます。これにより、控えめに言ってもCSSの監査が少し難しいものになります。

お気に入りのコードエディターの拡張機能を使用するか、これらのエラーが発見されないようにコードインスペクターを設定することができます。しかし、それは私がここで見せたいものではなく、それで十分ではありません。あまりにも多くの色、タイポグラフィの定義、またはZインデックスを使用する場合があります。これらはすべて、乱雑で維持が困難な不安定なCSSコードベースにつながる可能性があります。

CSSを真に監査するには、より深く掘り下げて、ベストプラクティスとは見なされない場所を見つける必要があります。これらの場所を見つけるために、次のツールを使用できます。

ブラウザ開発者ツール

Chrome開発者ツールでのCSS監査に使用されるツールを見てみましょう。ここでChromiumに基づいて勇敢なブラウザを使用しています。また、2020年にリリースされた素晴らしいDevtool機能の束をまとめたUmar Hansaのこの記事をチェックしてみたいと思うかもしれません。

CSSコードを手動で確認する場合は、 Inspect Toolを使用できます。それを使用して、特定の要素に適用されるCSSコードを見ることができます。矢印の検査を使用して、色、フォント、サイズ、アクセシビリティの詳細を確認することもできます。

グリッドおよびフレックスインスペクター

DevToolsインターフェイスには多くの実用的な詳細がありますが、私のお気に入りはグリッドとフレックスインスペクターです。それらを有効にするには、設定（開発者ツールの右上隅にあるピニオンアイコン）に移動し、[実験]をクリックし、CSSグリッドとフレックスボックスのデバッグを有効にします。このツールは主にレイアウトの問題をデバッグするために使用されますが、それを使用して、CSSグリッドまたはフレックスボックスがページに使用されているかどうかをすばやく判断することがあります。

CSSの概要

CSSのチェックは非常に基本的であり、すべての操作を手動で行う必要があります。より高度なDevTools機能を見てみましょう。

CSSの概要もその1つです。 CSS概要ツールを有効にするには、設定に移動し、[実験]をクリックしてから、CSS概要オプションを有効にします。 CSSの概要パネルを開くには、CMD Shift Pショートカットキーを使用し、「CSS概要」と入力し、「CSSの概要を表示」を選択できます。このツールは、色、フォント、コントラストの問題、未使用のクレーム、メディアクエリなどのCSSプロパティを要約しています。私は通常、このツールを使用して、CSSコードがどれほど良いか悪いかを確認します。たとえば、「灰色の50シェード」または型刻印の定義が多すぎる場合、スタイルガイドが順守されないか、スタイルガイドがまったく存在しないことを意味します。

コードカバレッジパネル

コードカバレッジツールには、ページで使用されるコードの量と割合が表示されます。それを表示するには、CMD Shift Pショートカットキーを使用し、「カバレッジ」と入力し、[コードカバレッジを表示]を選択し、[更新]アイコンをクリックします。

URLフィルター入力に「.CSS」と入力することにより、CSSファイルのみをフィルタリングできます。私は通常、このツールを使用して、サイトの配信技術を理解しています。たとえば、カバレッジが非常に高いことがわかった場合、各ページがCSSファイルを個別に生成すると仮定できます。これは重要なデータではないかもしれませんが、キャッシュ戦略を理解するのに役立つ場合があります。

レンダリングパネル

レンダリングパネルももう1つの便利なツールです。レンダリングパネルを開くには、CMD Shift Pをもう一度使用し、今回は「レンダリング」と入力し、「レンダリング」オプションを選択します。このツールには多くのオプションがありますが、私のお気に入りのオプションは次のとおりです。

• フラッシュを描く- 再描画イベントが発生したときに緑の長方形を撮ります。私はそれを使用して、あまりにも長い間レンダリングされてきた領域を識別します。
• レイアウトオフセット領域- レイアウトオフセットが発生したときに青い長方形を示します。これらのオプションを最大限に活用するために、通常、[ネットワーク]タブで遅い3Gプリセットを設定します。画面を録音してから、ビデオを遅くしてレイアウトオフセットを見つけます。
• フレームレンダリング統計- GPUとフレームのリアルタイムの使用を示します。このツールは、重いアニメーションとスクロールの問題を識別する場合に非常に便利です。

これらのツールは定期的な監査では暗示されていませんが、CSSコードのパフォーマンスとデバイスのエネルギーを排出しないかどうかを理解することが重要であるとわかりました。

他のオプションは、さまざまな機能のエミュレートと無効化、好みのカラースキーム機能の強制、メディアタイプの印刷、ローカルフォントの無効化など、問題のデバッグをより助長する場合があります。

パフォーマンスモニター

パフォーマンスCSSコードを監査するためのもう1つのツールは、パフォーマンスモニターです。それを有効にするには、CMD Shift Pをもう一度使用し、「パフォーマンスモニター」と入力し、[Performance Monitor]オプションを選択します。私は通常、このツールを使用して、ページと対話するとき、またはアニメーションが発生したときにトリガーされる再計算とレイアウトの数を確認します。

パフォーマンスパネル

パフォーマンスパネルには、ページの読み込み中のすべてのブラウザイベントの詳細なビューが表示されます。パフォーマンスツールを有効にするには、CMDシフトPを実行し、パフォーマンスを入力し、[パフォーマンスを表示]を選択し、リロードアイコンをクリックします。通常、スクリーンショットとWebメトリックのオプションを有効にします。私にとって最も興味深いメトリックは、最初の抽選、最初のコンテンツの引き分け、レイアウトオフセット、最大コンテンツの抽選です。描画時間とレンダリング時間を示すパイチャートもあります。

DevToolsは古典的な監査ツールとは見なされないかもしれませんが、どのCSS機能が使用されているか、コードの効率性、およびそのパフォーマンスを理解するのに役立ちます。これらはすべて監査の重要な要因です。

オンラインツール

DevToolsは単なる強力なツールです。ただし、他の利用可能なツールを使用してCSSを監査することもできます。

特定の視覚化ツール

特異性視覚化ツールは、コードベースのCSSセレクターの特異性を示しています。サイトにアクセスして、CSSを貼り付けてください。

メインチャートは、スタイルシートの特異性と位置の関係を示しています。他の2つのチャートは、特定の使用法を示しています。私はこのサイトを使用して「悪い」セレクターを見つけます。たとえば、赤でマークされた多くの特異性が見える場合、コードを改善できると簡単に結論付けることができます。あなたが改善するために一生懸命働くとき、参照のためにスクリーンショットを保存することは役立ちます。

CSS固有のチャートジェネレーター

CSS特異性チャートジェネレーターは、特異性を視覚化するための同様のツールです。それはわずかに異なるチャートを示しています。これは、CSSセレクターが特異性によってどのように編成されるかを理解するのに役立つ場合があります。ツールページにあるように、「ピークは良くなく、全体的な傾向は、スタイルシートの背後にある特異性がますます高くなっているということです。」これについてさらに議論するのは興味深いことですが、この記事の範囲を超えています。しかし、ハリー・ロバーツは彼の記事「専門チャート」にこれを広範囲に書いていますが、見る価値があります。

CSS統計

CSS統計は、スタイルシートの分析と視覚化を提供するもう1つのツールです。実際、ロビンはそれについての記事を以前に書き、彼が彼の作品でスタイルシートを監査するためにそれをどのように使用したかを示しました。

サイトのURLを入力してEnterを押すだけです。情報は、宣言カウントから色、タイポグラフィ、Zインデックス、特異性など、宣言カウントからその他まで、意味のある部分に分類されます。繰り返しますが、将来の参照のためにスクリーンショットを保存する必要があるかもしれません。

プロジェクトウォレス

Project Wallaceは、ここでCSS-TricksでプロジェクトをカバーしているBart Venemanによって作成されました。 Project Wallaceの力は、インポートされたコンテンツに基づいて変化を比較および視覚化できることです。これは、CSSコードベースの以前の状態を表示し、状態間でコードがどのように変化するかを確認できることを意味します。特に、コードが改善されたことを誰かに納得させたい場合は、この機能が非常に便利であることがわかりました。このツールは単一のプロジェクトでは無料で、より多くのプロジェクトの有料プランを提供しています。

CLIツール

DevToolsとオンラインツールに加えて、CSSの監査に役立つコマンドラインインターフェイス（CLI）ツールがあります。

ウォレス

私のお気に入りのCLIツールの1つはWallaceです。インストール後、Wallaceを入力してから、サイト名を入力します。出力には、サイトのCSSコードについて知っておく必要があるすべての情報が表示されます。私のお気に入りのことは、重要な使用数とコード内のIDの数です。別の簡潔なメッセージは、最も高い特異性数と使用されるセレクターの数です。これらは、「悪い」コードの赤い旗になる可能性があります。

このツールで私が一番気に入っているのは、外部ファイルだけでなく、インラインコードもサイトからすべてのCSSコードを抽出することです。これが、CSSの統計とウォレスの報告が一致しない理由です。

CSSCSS

CSSCSS CLIツールは、同じ宣言を共有するルールが表示されます。これは、重複コードを識別し、記述されたコードの量を減らすのに役立ちます。特に今日のキャッシュメカニズムの下で、これを行う前によく考えます。 CSSCSSにはRubyが必要であることに言及する価値があります。

その他の便利なツール

他のCSSツールは監査に使用されない場合がありますが、それでも有用です。これらもリストしましょう：

• Color Sorter - CSSの色を色相、そして飽和状態でソートします。
• CSSアナライザー - CSS文字列の分析を作成します。
• Constyble - これは、CSSアナライザーに基づくCSS複雑さコードチェッカーです。
• 今すぐCSSを抽出します - 単一のWebページからすべてのCSSを取得します。
• CSSを取得 - ページ上のすべてのCSSをクロールします。
• UCSS - 未使用のCSSを識別するためにWebサイトをクロールします。

結論は

CSSは私たちの周りにあり、各プロジェクトの一流の市民と考える必要があります。他の人があなたのCSSについて考えることは重要ではありませんが、あなたがそれについて考えることは本当に重要です。 CSSが整理され、よく書かれている場合は、デバッグの時間を短縮し、新しい機能の開発時間が増えます。理想的には、私たちはすべての人に良いCSSを書くように教育しますが、時間がかかります。

CSSコードに焦点を合わせ始める日を今日作りましょう。

CSS監査は誰にとっても面白いことではないことを知っています。ただし、これらのツールのいずれかでコードを実行し、CSSコードベースの任意の部分を改善しようとすると、この記事はタスクを完了します。

私は最近、CSSコードにもっと注意を払っており、より多くの開発者にCSSコードをより敬意を持って書くことに取り組んでいます。 CSSの監査専用のCSS-Auditors.com（Hyphenated Domainsを応援してください！）で新しいプロジェクトを開始しました。

他のツールを知っている場合は、コメントでお知らせください。

以上がCSSを監査するためのツールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。