CSSのデバッグと最適化：CSSOによるミニフィッシュ-CSSチュートリアル-php.cn

CSS圧縮ツールCSSO：ウェブサイトのパフォーマンスを改善するための実用的なガイド

この記事は、ティファニーの最新の本「CSSマスター、第2版」から抜粋しています。 CSSマスターになるための道では、CSSのトラブルシューティングと最適化スキルを習得することが重要です。レンダリングの問題を診断して修正する方法は？ CSSがエンドユーザーのパフォーマンスに影響を与えないようにする方法は？コードの品質を確保する方法は？

適切なツールは、効率的なフロントエンド操作を保証できます。この記事では、CSS圧縮技術に焦点を当てます。

開発者ツールは、レンダリングの問題を見つけて修正するのに役立ちますが、それはどれほど効率的ですか？ファイルサイズは十分に小さいですか？現時点では、圧縮ツールを使用する必要があります。

CSSでは、圧縮は単に「不要な文字を削除する」ことだけです。たとえば、次のコードブロックを検討してください

このコードには、合計98バイトのラインブレークとスペースが含まれています。圧縮された例を見てみましょう：

<code>h1 {
    font: 16px / 1.5 'Helvetica Neue', arial, sans-serif;
    width: 80%;
    margin: 10px auto 0px;
}</code>

ログイン後にコピー

今、私たちのCSSはわずか80バイトで、18％の減少です。もちろん、バイトが少ないほど、ダウンロード速度が速くなり、データ送信のコストが低くなります。これはあなたとユーザーにとって良いことです。

<code>h1{font:16px/1.5 'Helvetica Neue',arial,sans-serif;width:80%;margin:10px auto 0}</code>

ログイン後にコピー

この記事では、Node.jsベースの圧縮ツールであるCSS Optimizer（CSSO）を紹介します。 CSSOをインストールするには、最初にnode.jsとnpmをインストールする必要があります。 NPMはnode.jsインストールプロセスの一部としてインストールされているため、1つのパッケージのみをインストールする必要があります。

CSSOを使用するには、コマンドラインインターフェイスに精通する必要があります。 LinuxおよびMacOSユーザーは、ターミナルアプリケーションを使用できます（MacOSはアプリケーション>ターミナルアプリケーションです）。 Windowsを使用している場合は、コマンドプロンプトを使用してください。 [Windows]メニューまたは[Windows]メニューに移動し、[検索]ボックスのCMDと入力します。

インストールcsso

node.jsとnpmをインストールした後、CSSOをインストールできます。コマンドラインでは、：

と入力します

コマンドラインで使用できるように、CSSOをグローバルにインストールするためのフラグをグローバルにインストールします。インストールが完了すると、NPMはターミナルウィンドウにメッセージを印刷します。

<code>npm install -g csso</code>

ログイン後にコピー

今、CSSを圧縮する準備ができました。

CSSOを使用して-g圧縮

CSSファイルを圧縮し、CSSOコマンドを実行してパラメーターとしてファイル名を渡すには： CSS Debugging and Optimization: Minification with CSSO

これにより、基本的な圧縮が実行されます。 CSSOは、CSS入力ファイルで不必要なスペース、追加のセミコロン、およびコメントを削除します。

完了後、CSSOは最適化されたCSSを標準出力、つまり現在の端子またはコマンドプロンプトウィンドウに印刷します。ただし、ほとんどの場合、出力をファイルに保存する必要があります。これを行うには、2番目のパラメーターをCSSO（圧縮ファイルの名前）に渡してください。たとえば、style.cssの圧縮バージョンをstyle.min.cssとして保存する場合は、次のコマンドを使用します。

<code>csso style.css</code>

ログイン後にコピー

デフォルトでは、CSSOはCSSの一部を再配置します。たとえば、宣言ブロックを複製したセレクターとマージし、上書き属性を削除します。次のCSSを検討してください：

<code>h1 {
    font: 16px / 1.5 'Helvetica Neue', arial, sans-serif;
    width: 80%;
    margin: 10px auto 0px;
}</code>

ログイン後にコピー

このコードセグメントでは、前の

宣言をオーバーライドします。また、連続宣言ブロックのセレクターとしてmargin-leftを再利用しました。最適化と圧縮の後、marginを取得します h1

CSSOは、不要なスペース、ニューライン、セミコロンを削除し、

<code>h1{font:16px/1.5 'Helvetica Neue',arial,sans-serif;width:80%;margin:10px auto 0}</code>

ログイン後にコピー

に短縮します。また、CSSOは

および#ff6600プロパティを宣言（#f60）にマージし、個別のmarginセレクターブロックを1つに組み合わせます。 margin-left margin: 20px 30px 20px 0 CSSOがCSSをどのように書き換えるかについて懐疑的である場合、そのリファクタリング機能を無効にすることができます。 h1または

ロゴを使用するだけです。たとえば、実行

は--restructure-offになります -off csso style.css style.min.css -off今ではCSSは圧縮されていますが、最適化されていません。リファクタリングを無効にすると、CSSファイルが最小サイズに達することができなくなります。問題が発生しない限り、リファクタリングを無効にしないでください。

<code>npm install -g csso</code>

ログイン後にコピー

SASS、Less、PostCSSなどのプリプロセッサーとポストプロセッサは、ツールセットで圧縮機能を提供します。ただし、CSSOを使用すると、ファイルサイズをさらに削減できます。

CSSのデバッグと最適化の詳細については、Tiffanyの本「CSS Master、Second Edition」をご覧ください。

関連記事：

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

CSSOおよびCSS圧縮

CSSOとは何ですか、そしてなぜCSSの最適化において重要なのですか？

CSSO、またはCSS Optimizerは、カスケードスタイルシート（CSS）ファイルを最適化するためのツールです。 CSSは、HTMLまたはXMLで書かれたドキュメントの外観と形式を説明するために使用される言語です。 CSSOは、CSSファイルのサイズを最小限に抑えることで機能します。これにより、Webサイトの読み込み速度が大幅に向上できます。これは重要です。これは、荷重速度が速くなるとユーザーエクスペリエンスが向上し、検索エンジンでのウェブサイトのランキングが改善される可能性があるため、重要です。

CSSOはどのように機能しますか？

CSSOは、CSSコードを分析し、さまざまな変換を適用することにより、サイズを縮小します。これらの変換には、不必要なスペースとコメントの削除、同じセレクターと属性のマージ、さらには属性値をより短い形式に書き換えることさえ含まれます。結果は、元のファイルとまったく同じ機能を機能させる、より小さく、より最適化されたCSSファイルになります。

CSSOの使用方法は？

CSSOは、コマンドラインツールとして、またはnode.jsモジュールとして使用できます。コマンドラインツールとして使用するには、NPM（ノードパッケージマネージャー）を使用してグローバルにインストールする必要があります。インストール後、コマンド「CSSO [入力ファイル] [出力ファイル]」を使用してCSSファイルでCSSOを実行できます。 node.jsモジュールとして使用するには、プロジェクトにローカルにインストールしてからスクリプトに参照する必要があります。

他のCSSコンプレッサーと比較してCSSOを使用することの利点は何ですか？

CSSOは、CSSファイルを最小限に抑えるだけでなく、CSS構造を最適化することもできます。これは、同じCSSセレクターをマージし、冗長プロパティを削除し、プロパティ値をより短いフォームに書き換えることさえできることを意味します。これにより、スペースとコメントのみを削除する他のCSSコンプレッサーと比較して、ファイルサイズが小さくなります。

CSSOは私のCSSコードを破りますか？

CSSOは、機能に影響を与えることなくCSSを最適化するように設計されていますが、場合によってはCSSを破る可能性があります。これは通常、CSSOのエラーまたは不適切な使用によって引き起こされます。 CSSOを適用した後、すべてが適切に機能することを確認するために、必ずWebサイトを徹底的にテストしてください。