CSSデバッグと最適化：コード品質のツール

CSSコードの品質の向上：StylelintおよびUNCSSツールの詳細な説明

コアポイント

StylelintとUNCSSは、CSSコードの品質を分析するための2つの実用的なツールです。 Stylelintは、Indentsのタブの代わりにスペースを強制するなど、コードの潜在的な問題をチェックします。 両方のツールはnode.jsに基づいており、NPMを使用してインストールできます。小さなWebサイトの場合、多くのツールタグ付けの問題は無視できますが、大規模なプロジェクトでは、メンテナンスの問題を防ぐのに役立ちます。 タスクランナーまたはGrunt、Gulp、Webpackなどのシステム構築システムは、接続を自動化してタスクを最適化して、StylelintやUNCSSなどのツールが使用する作業の量を減らすことができます。これらのツールは、プラグインを介してGrunt、Gulp、またはWebpackと統合できます。 CSSデバッグと最適化コード品質ツールは、ウェブサイトの読み込み速度を改善できます。これは、ウェブサイトの負荷が遅いため、ユーザーエクスペリエンスの低下につながり、ウェブサイトの検索エンジンランキングに悪影響を与える可能性があるため、重要です。 （次のCSSコード品質ツールの紹介は、ティファニーの新しい本「CSSマスター、セカンドエディション」から抜粋しています）

CSSマスターになるための道では、CSSコードをデバッグおよび最適化する方法を理解する必要があります。レンダリングの問題を診断して修正する方法は？ CSSがエンドユーザーにパフォーマンスの遅れを引き起こさないことを確認するにはどうすればよいですか？コードの品質を確保する方法は？

フロントエンドが適切に実行されていることを確認するのに役立つツールを理解することが重要です。

この記事では、CSSコードの品質を分析するためのいくつかのツールについて説明します。次の2つのツールに焦点を当てます

stylelint uncss stylelintは、コードスタイルのチェックツール（リナー）です。 Linterは、コードの潜在的な問題をチェックするアプリケーションであり、タブの代わりにスペースを使用したインデントなど、コードコンベンションを実施します。 StyleLintは、リピートセレクター、無効なルール、不必要な特異性などの問題を見つけることができます。これらの問題は、CSSの保守性に最も大きな影響を与えます。 一方、UNCSSは、CSSの未使用のセレクターとスタイルルールをチェックします。スタイルシートとHTMLページリストを解析し、未使用のルールを削除したCSSファイルを返します。

両方のツールはnode.jsを使用し、NPMを使用してインストールできます。

小さなWebサイト（個人的なブログやまれな更新のあるページなど）を扱っている場合、これらのツールによってタグ付けされた多くの問題を安全に無視できます。リファクタリングに時間を費やしますが、保守性と速度にはほとんど成功しません。ただし、大規模なプロジェクトでは、非常に貴重です。問題が始まる前に、保守性の問題を回避するのに役立ちます。

stylelint

stylelintは、エラーを回避し、スタイルの慣習を実施するのに役立ちます。 160を超えるエラーチェックルールがあり、プラグインを介して独自のルールを作成できます。 stylelintのインストールと構成

他のnpmパッケージと同様にstylelintをインストールします： npm install -g stylelint インストールが完了したら、stylelintを使用する前に構成する必要があります。 stylelintには、デフォルトの構成ファイルが付属していません。構成ファイルを作成する必要があります。プロジェクトディレクトリに .stylelistrc ファイルを作成します。このファイルには、JSON（JavaScriptオブジェクト表記）またはYAML（YAML AIN NOT MARKUP LANGUAGE）SYNTAXで使用できる構成ルールが含まれます。このセクションの例はJSONを使用しています。

.stylelistrc ファイルには、 rules 属性を持つオブジェクトが含まれている必要があります。 rules の値自体は、StyleLintルールのセットとその値を含むオブジェクトです。

たとえば、 { "rules": {} } 宣言を無効にしたい場合は、 !important に declaration-no-important ： true を設定できます。

{ "rules": { "declaration-no-important": true } } Stylelintは、構文エラー、インデント、新しいラインの一貫性、無効なルール、セレクターの特異性をチェックする150を超えるルールをサポートしています。 StyleLintユーザーガイドで、ルールの完全なリストと利用可能な値を見つけることができます。

基本的なStylelint構成から始めます 基本的な構成から始めて、プロジェクトの要件に従ってカスタマイズする方が簡単になる場合があります。 基本的な構成は、優れた開始構成です。すべての「可能なエラー」ルールを有効にします。 npm： stylelint-config-recommended を使用してインストールします

npm install -g stylelint-config-recommended その後、プロジェクトディレクトリで、次の行で ファイルを作成します。 .stylelistrc

{ "extends": "/absolute/path/to/stylelint-config-recommended" } をインストールしたディレクトリに置き換えます。グローバルNPMパッケージは、通常、Windows 10システムの ディレクトリ、およびUnix/LinuxおよびMacOSシステムにあります。入力 /absolute/path/to/ グローバル stylelint-config-recommended ディレクトリを見つける。 %AppData%\npm\node_modules /usr/local/lib/node_modules npm list -g 属性を追加することにより、構成を強化できます。たとえば、ベンダーのプレフィックスを禁止するには、 node_modules ファイルが次のようになります。

セレクターの最大特異性を0,2,0に制限する場合はどうなりますか？これにより、 rules のようなセレクターが許可されますが、 .stylelistrc ではありません。これを行うことができます

ルールを構成に追加します： { "extends": "/absolute/path/to/stylelint-config-recommended", "rules": { "value-no-vendor-prefix": true } } .sidebar .title stylelint #footer_nav を使用します selector-max-specificity stylelintを使用してCSSファイルを確認するには、stylelintコマンドを実行し、パラメーターとしてCSSファイルへのパスを渡します。

{ "extends": "/absolute/path/to/stylelint-config-recommended", "rules": { "value-no-vendor-prefix": true, "selector-max-specificity": "0,2,0" } } または、特定のディレクトリ内のすべてのCSSファイルを確認することも、再帰的に確認することもできます。 stylelintは、 要素を使用して、HTMLファイルに埋め込まれたCSSを確認することもできます。パラメーターとしてHTMLファイルへのパスを渡すだけです。

stylelint stylesheet.css 終了すると、stylelintは、下の画像に示すように、エラーを含むファイルのリストを表示します。

uncss UNCSSはHTMLおよびCSSファイルを解析し、未使用のCSSを削除します。プロジェクトにBootstrapのようなCSSフレームワークが含まれている場合、またはリセットスタイルシートを使用している場合は、ワークフローにUNCSSを追加することを検討してください。コードから不必要なCSSとバイトを削除します。

uncssインストール 他のNPMパッケージと同様に、次のコマンドでUNCSSをインストールできます。

npm install -g stylelint コマンドラインからUNCSSを使用します UNCSSには、リンクされたCSSファイルを含むHTMLページのファイルパスまたはURLが必要です。たとえば、

{ "rules": {} } UNCSSはHTMLとそのリンクされたスタイルシートを解析し、最適化されたCSSを標準出力に印刷します。ファイルにリダイレクトするには、リダイレクトオペレーター（ ）を使用します： >

{ "rules": { "declaration-no-important": true } } 複数のファイルパスまたはURLをコマンドラインに渡すこともできます。 UNCSSは各ファイルを分析し、最適化されたCSSを1つ以上のページに影響するルールを捨てます。

コマンドの完全なリストとnode.jsスクリプトを使用してUNCSSを使用する方法の例については、UNCSSドキュメントを参照してください。 npm install -g stylelint-config-recommended タスクランナーを使用するか、ツールをビルドすることを検討してください

これらのツールを実行すると、多くの追加作業のように思えるかもしれません。これを行うには、タスクランナーを追加するか、ワークフローにシステムを構築することを検討してください。人気のタスクランナーには、Grunt、Gulp、Webpackが含まれます。 3つのツールはすべて、十分に文書化されたドキュメントと巨大な開発者コミュニティがあります。 これらのタスクランナーと構築システムの利点は、接続を自動化してタスクを最適化できることです。それらはCSSにも限定されません。ほとんどのビルドツールには、JavaScriptと画像を最適化するためのプラグインも含まれています。

構成とビルドスクリプトファイルは通常JSONとJavaScriptであるため、プロジェクト間で簡単に再利用するか、チームと共有できます。この記事に記載されている各ツールは、プラグインを介してGrunt、Gulp、またはWebpackと統合できます。

最も重要なことは、ツールキットを構築するための実用的なアプローチをとることです。ワークフローを強化し、出力品質を向上させることができると思われるツールを追加します。

（CSSのデバッグと最適化の詳細については、Tiffanyの本「CSS Master、Second Edition」をチェックしてください）関連記事： CSSデバッグと最適化：ブラウザベースの開発者ツール

cssデバッグと最適化：CSSOを使用した圧縮 CSSに関するFAQ（FAQ）コード品質ツールのデバッグと最適化 コード品質ツールをデバッグして最適化するCSSを使用することの利点は何ですか？ CSSコード品質ツールのデバッグと最適化は、すべてのWeb開発者にとって不可欠です。 CSSコードでバグを特定して修正するのに役立ち、Webサイトが期待どおりに機能するようにします。これらのツールは、CSSコードの最適化にも役立ち、Webサイトの読み込み速度を大幅に向上させることができます。これは重要です。これは、ウェブサイトの読み込みが遅い可能性があるユーザーエクスペリエンスの低下につながり、ウェブサイトの検索エンジンランキングに悪影響を与える可能性があるため、重要です。さらに、これらのツールはCSSコードの品質を維持するのに役立ち、読みやすく管理しやすくなります。 UNCSSはどのように機能しますか？ UNCSSは、HTMLおよびCSSファイルを分析して未使用のスタイルを削除する強力なツールです。 HTMLファイルを解析し、使用したCSSセレクターを識別し、CSSファイルのセレクターと比較することで機能します。 HTMLファイルで使用されていないCSSファイルのセレクターは、未使用と見なされ、削除されます。これにより、CSSファイルのサイズが大幅に削減されるため、Webサイトのロードが高速化されます。

オンラインでUNCSSを使用する方法は？ UNCSS Onlineは、コンピューターにインストールせずにUNCSSを使用できるWebベースのツールです。それを使用するには、UNCSSオンラインWebサイトにアクセスして、HTMLとCSSコードを提供されたフィールドに貼り付け、[未使用のCSSの削除]ボタンをクリックします。次に、このツールはコードを分析し、HTMLコードで使用されるスタイルのみを含む新しいCSSファイルを提供します。

UNCSSの使用方法に関するビデオチュートリアル？ はい、UNCSSの使用方法を導くことができるオンラインで多くのビデオチュートリアルがあります。これらのチュートリアルは、初心者でさえツールを理解して使用することが簡単な段階的な指示を提供します。 YouTubeにはこのようなチュートリアルがあります。

私のウェブサイトから未使用のCSSを削除する方法は？ ウェブサイトから未使用のCSSを削除するツールと方法がいくつかあります。最も人気のあるツールの1つはUNCSSで、HTMLおよびCSSファイルを分析して未使用のスタイルを削除します。他のツールには、CSSコードの最適化にも役立つPurifyCSSやCSSNANOが含まれます。さらに、ブラウザー開発者ツールを使用してWebサイトをチェックして未使用のスタイルを識別することにより、未使用のCSSを手動で削除できます。

他のCSSデバッグおよび最適化ツールはありますか？ UNCSSに加えて、他にもいくつかのCSSデバッグと最適化ツールがあります。これらのツールには、CSSコードのエラーを識別して修正するのに役立ちます。これは、不要な文字を削除することでCSSファイルのサイズを削減します。

CSSコードの品質を確保する方法は？ CSSコードの品質には、さまざまなプラクティスが含まれます。これらには、SASS以下のようなCSSプリセッサーが含まれます。これにより、コードを整理し、CSSリナーを使用してエラーを識別および修正します。さらに、意味のあるクラスやID名の使用、注釈コード、一貫したコーディングスタイルへの接着などのベストプラクティスに従うことも、CSSコードの品質を維持するのに役立ちます。

CSSのデバッグと最適化ツールは、私のウェブサイトのSEOをどのように改善しますか？ CSSデバッグおよび最適化ツールは、ウェブサイトの読み込み速度を上げることにより、ウェブサイトのSEOを大幅に改善できます。 Googleビューページのような検索エンジンは、ランキングファクターとして速度を読み込むため、検索結果でロードされるWebサイトはより高くランク付けされる場合があります。さらに、これらのツールはより良いユーザーエクスペリエンスを作成するのに役立ちます。これは、ウェブサイトのSEOにもプラスの影響を与えます。

私が初心者である場合、CSSデバッグと最適化ツールを使用できますか？ はい、ほとんどのCSSデバッグおよび最適化ツールは、初心者や経験豊富な開発者がユーザーフレンドリーで利用できるように設計されています。これらのツールの多くは、あなたを始めるための詳細なドキュメントとチュートリアルを提供します。ただし、これらのツールを使用する前に、CSSを特定して理解することが最善です。

CSSデバッグと最適化ツールを使用することの欠点は何ですか？ CSSデバッグと最適化ツールは多くの利点を提供しますが、潜在的な欠点もあります。たとえば、一部のツールでは、現在使用されていないが将来必要になる可能性があるスタイルを削除する場合があります。さらに、これらのツールは、実際に必要な場合に使用されていないものとしてスタイルを識別し、誤検知を生成する場合があります。したがって、これらの変更をウェブサイトに適用する前に、これらの変更を再確認してください。