CSS ファイルのフォーマットと最適化に最適なツール 10 選

これらの厳選されたツールの助けを借りて、Web 開発者にとって CSS ファイルのフォーマットと最適化はもはや頭痛の種ではありません。

カスケード スタイル シート (CSS) は、その誕生以来、Web ページのビジュアルの概要を説明するために広く使用されてきました。これらには、色、レイアウト、アニメーション、フォントの定義が含まれます。 CSS は HTML から独立しているため、ページのコンテンツを少し変更することなく、Web ページのプレゼンテーションをさまざまな画面サイズのさまざまなタイプのデバイスに簡単に適応させることができます。

CSS は、プロパティ値がコンテンツ階層に適用される方法にちなんで、カスケード スタイルシートと呼ばれます。子要素は、親要素からプロパティ値を継承またはオーバーライドできます。これらの機能は、階層的な影響範囲に基づいたモデルを通じて提供されます。このモデルの問題は、正しく使用しないと、Web サイトのパフォーマンスに重大な影響を与える可能性があることです。

そして、遅いウェブサイトを好む人はいません。そのため、CSS ファイルを可能な限り適切かつ高速に作成するように明示的に設計された新しい種類のツールとともに、CSS の最適化が必要になりました。

CSS の最適化はさまざまな方法で行うことができます。CSS ファイルのサイズを小さくしたり、クリーンアップしたり、正確性をテストまたは検証したり、整頓したり、コードを理解できるようにフォーマットしたりできます。ユーザーエクスペリエンスを向上させるために調整されました。私たちは、これらのタスクのそれぞれに最適なツールを選択しました。

# CSS チューニングツール

CSS 縮小

CSS Minify は 、CSS の縮小を行うためのシンプルなツールです。CSS の縮小とは、美しく、読みやすく、整形式の CSS を取得し、そのスペース、インデント、改行、コメントをすべて削除するプロセスです。結果として得られる縮小された CSS は、これらの要素がなくても問題なく使用できます。また、縮小すると CSS が読みにくくなり、コード泥棒が苦労して作成したスタイルシートを盗むのを阻止します。

コードを縮小するときは、その美しい (縮小されていない) バージョンを保持しておくことをお勧めします。将来、コードに変更を加える必要がある場合に備えて、コードを読み取れる必要があるからです。

トップコート

トップコート は CSS を最適化するツールではありません。代わりに、これは速度を念頭に置いて設計されたオープンソースの CSS ライブラリです。これは、Brackets 用に開発された Adob​​e デザイン言語である Edge Reflow の子孫です。

Topcoat には、PSD およびその他の多くのデザイン アーティファクトと、シンプルでクリーンな SVG アイコンおよびスタイル ガイドのコレクションが含まれています。また、ベンチマーク ツールと高級な Adob​​e Source Sans Pro フォント ファミリも提供します。

コードビューティファイアー

Code Beautifier は 、人気のあるオープンソースの CSS パーサーおよびオプティマイザーである CSS Tidy に基づいています。 CSS コードをテキスト領域に貼り付けて処理したり、URL から取得したりできます。ジョブを実行すると、最適化されたコードと加えられた変更のリストが表示されます。変更したコードをクリップボードにコピーしたり、後で使用できるようにファイルに保存したりできます。

このツールは、好みに合わせて結果を調整できる、重要かつ包括的なオプションのリストを提供します。たとえば、低圧縮から最高圧縮までの 5 つの圧縮オプションが提供されます。他のオプションでは、並べ替え、他の形式の圧縮、不要な項目の削除などを指定できます。

CSSナノ

もう 1 つの CSS ミニファイア ツールは CSS Nano です。これは、PostCSS と呼ばれる、JavaScript でスタイルを変換するために作成されたツールに基づいています。このツールのプラグイン アーキテクチャのおかげで、CSS Nano の作成者は、機能が制限された小さなモジュールからこのツールを構築することができました。

デフォルトでは、CSS Nano は、指定された CSS ファイルを処理し、安全な最適化のみを実行します。ただし、このツールには圧縮を限界まで押し上げるオプションも用意されています。 CSS の仕組みは変わりませんが、不要な空白は削除されます。また、その識別子は圧縮され、不要な定義は完全に削除されます。

# CSS クリーニングツール

ダーティマークアップ

Dirty Markup は ミニファイアーとはまったく逆のことを行います。有効な CSS コードである限り、入力されたコードをすべて取得してクリーンアップし、読みやすくします。結果として得られるコードは完全に美しくなります。

Dirty Markup の作成者らは、自社のツールを使用して 10 億行近くのコード (CSS だけでなく HTML と JavaScript も考慮) が美化されたと述べています。

ダストミーセレクター

Dust-Me セレクターは、 Web サイトをスキャンして未使用の CSS セレクターを見つけて削除し、コードのサイズを削減するために作成されました。 Firefox および Opera のアドオンとして機能します。

Dust-Me セレクターは、個々のページで動作したり、サイトマップ全体をクロールしたりして、見つかったすべてのスタイルシートとセレクターの詳細を表示し、使用済みと未使用で整理できます。 Firefox バージョンでは、閲覧中にページを自動的にスキャンできます。これを行うときは、ページが変更された場合にミューテーション イベントによって追加のスキャンがトリガーされる可能性があることだけを考慮する必要があります。

CSS リント

CSS Lint は 最小限のインターフェイスを提供します。CSS コードを貼り付けて「lint」する大きなテキストボックスだけです。 lint プロセスがコードにどのような影響を与えるかについては示されていませんが、ページの上部にある警告メッセージは、その結果があなたの感情を傷つける可能性があること、そしてコードの改善に役立つことを示しています。

CSS Lint は、事前定義されたルールのセットに照らしてコードの構文を検証します。これにより、潜在的な非効率性やエラーが検出されます。 CSS Lint を少しカスタマイズすることで、強制するルールのセットを選択できるようになります。

# CSS テスト/検証ツール

CSSストレステスト

CSS ストレス テストは、 特定の Web ページの CSS にストレス テストを適用するブックマークレット (JavaScript コードの小さな部分) として機能します。このツールは、CSS コード内のすべての要素とそのクラスのインデックスを作成します。次に、クラスを 1 つずつ削除し、ページのスクロールにかかる時間を計測することでストレス テストを開始します。

セレクターを削除するとページのスクロールにかかる時間が大幅に短縮される場合、そのセレクターは削除または修正する必要がある問題のある領域を示しています。このツールは、角丸、不透明度、テキストの影、ボックスの影を許可する派手な CSS3 コードで特に機能します。これらすべての効果は、画像のスライスや特別なスクリプトを使用したり、要素を追加したりすることなく、CSS3 で実行できます。

しかし、CSS3 は問題を引き起こす可能性があります。単一のプロパティによって、表示される再描画やページスクロールの問題が発生する可能性があります。そこで CSS ストレス テストが役に立ちます。

CSS検証サービス

CSS 検証サービスは、 カスケード スタイルシートとスタイルシートを含む (X)HTML を検証します。このツールは、CSS のすべてのバージョンで定義されているプロパティをチェックします。ページまたは CSS ファイルを検証するには、その URI (統一リソース識別子) を入力し、プロファイル (確認する CSS の種類)、ターゲット デバイス、表示する警告、ベンダー拡張機能の処理などの基本オプションを設定するだけです。 -関連の問題 (エラーまたは警告を表示)。

すべての設定が完了したら、「チェック」ボタンを押して結果を待ちます。最終レポートには、エラーと警告の包括的なリストが表示され、無効なプロパティ、構文エラー、不明なベンダー拡張機能など、CSS を調整するために修正する必要があるその他の多くの問題が見つかります。レポートには、ページ内のすべての有効な CSS コードも表示されます。

バックストップJS 3

BackstopJS 3 は、 レスポンシブ Web ユーザー インターフェイスの視覚的な回帰テストを自動化します。一連の DOM スクリーンショットを比較することでその役割を果たします。それはエキサイティングな機能のリストを提供します。ブラウザ内レポート、印刷と画面のレイアウト設定、および表示フィルタリングや参照/テスト/視覚的な差分インスペクターなどのその他の特定の機能もあります。

Puppeteer と ChromyJS スクリプトを使用すると、BackstopJS 3 はユーザー インタラクションをシミュレートでき、Chrome ヘッドレスでテストをレンダリングできます。クロスプラットフォーム レンダリングの問題を解決するために、Docker レンダリングも統合されています。このツールはスタンドアロン パッケージとしてグローバルまたはローカルで実行でき、CI およびソース管理とうまく連携します。 BackstopJS 3 は非常に使いやすく、たった 3 つのコマンドでかなりの作業を行うことができます。

結論

上記の CSS ツールが、Web アプリケーションの CSS ファイルを最適化してパフォーマンスを向上させるのに役立つことを願っています。高度な CSS の学習に興味がある場合は、この 素晴らしいコース をチェックしてください。