CSS の縮小: ヒントとツール

クリーンで最適化された CSS を書くことを学ぶには、多くの練習と、クリーンにしたいという無意識の強迫的な欲求が必要です。 CSS を整理整頓することは、単に整理整頓したいという異常な心理的欲求だけを意味するわけではありません。ただし、特に大規模なサイトの場合、ページの読み込みが速くなります。ロード時間が短縮されると、使いやすさが向上し、ユーザーの満足度が高まります。

多くの人がコードヒステリーを患っています。これは悪いことではありません。

この記事では、CSS を最適化するために使用できるテクニックと、コードを自動的に圧縮できるオンラインおよびデスクトップの圧縮ツールをまとめます。

圧縮するか圧縮しないか

CSS を圧縮する方法について説明する前に、多くの場合、圧縮とコードの可読性の間にはバランスが必要であることに注意することが重要です。多くのプログラマーは、CSS がクリーンに構成されていることを誇りに思っており、コメントや改行を削除するためにコードをコンプレッサーにかける必要はありません。デザイナーは、作成するコードの目標を分析する必要があります。数行の CSS のみを必要とする小規模な Web サイトを作成している場合は、追加の圧縮を行う必要がない場合があります。同様に、オープンなチームと共有する必要があるコードを作成している場合、追加のコメントや改行を挿入すると、同僚の時間を大幅に節約でき、心からの感謝を得ることができます。ただし、大量の CSS を必要とする大規模な Web サイトをデザインしている場合は、ファイル サイズに注意を払い、できるだけ小さくする必要があります。

圧縮と可能性の完璧な組み合わせを見つけるには時間がかかるかもしれませんが、どちらも検討する価値があり、それらのバランスを達成することで作業がはるかに簡単になります。同時に、圧縮が必ずしも可読性の低下につながるわけではないことも明らかです。コードを圧縮して、より適切でより組織化されたコードを作成するために利用できる手法が多数あります。

それを念頭に置いて、CSS ファイルを最小限に抑えるためのいくつかのテクニックを見てみましょう。

空白のスタイル定義

明らかなことから始めましょう。空白のスタイルがある場合は、それを破棄します。後で必要になるかもしれないから、面倒だとわかっているからという言い訳はしないでください。正当な理由がない限り、それらを追加しないでください。

略語

CSS 省略形は、複数行の CSS を 1 行に結合する方法です。 知っている省略テクニックをすべて使用する習慣を身につけると、最終的に作成するコードの行数を大幅に減らすことができます。以下に例を示します。

ロングバージョン:

 ＃容器{
    パディングトップ: 5px
    右パディング: 10px
    パディングボトム: 30px
    パディング左: 18px
}

短縮版:

 ＃容器{
    パディング: 5px 10px 30px 18px ;
}

CSS の略語について詳しくは、次の記事を参照してください。

CSS スプライト

CSS スプライトの背後にある元々のアイデアは、HTTP リクエストの数を減らしてページの読み込み時間を短縮することでした。 Sprite がこの目標を達成する方法は、複数の画像を 1 つの画像ファイル (通常はグリッド形式の画像) に結合することです。それぞれの画像は、大きいスプライト画像の背景位置を切り替えることで表示されます。 CSS コードの場合、スプライト テクノロジを使用すると、コードの再利用性と保守性が大幅に向上し、CSS コードの量が大幅に削減されます。

CSS スプライトの詳細については、CSS-Tricks に関する Chris Coyier のチュートリアルをご覧ください。

もちろん、Front-End Observation にはCSS スプライトに関する貴重な記事やヒントも掲載されています。

コメントを減らす

私はコード内でコメントを使用するのが好きです。追加するコメントが増えるほど、コードのさまざまな部分をより速く視覚的にナビゲートできるようになります。ただし、リソースをほとんど使用せず、高度に最適化された CSS が必要な場合は、過剰なコメントによって貴重なバイトが消費されてしまいます。したがって、不要なコメントをすべて削除し、できるだけバイト数を少なくする必要があるコメントを再フォーマットするようにしてください。

適切なフォント タイプ (font-Family)

ファイルサイズが大きな問題となる場合は、フォントファミリーに代替フォントを含めないでください。不要な荷物を処分し、余分な選択肢を 1 つまたは 2 つに減らします。

前に：

 #container {フォントファミリー: パラティーノ、ジョージア、タイムズ、セリフ}

後：

 #container {フォントファミリー: Palatino 、セリフ}

フォントに関しては、Yu Bo 著の「 Web Default Fonts についての 3 つの話」を読むことを強くお勧めします。この記事で言及されているいくつかの記事も読んで考える価値があります。

16 進数の色を使用する

バイト数を減らすために、すべての RGB カラー値が対応する 16 進値に変換されます。最初はあまり意味がないかもしれませんが、どんなバイトでもそれだけの価値はあります。

前に：

 #コンテナ{カラー: rgb ( 131 , 100 , 219 ) }

後：

 #コンテナ{カラー: # 8364DB }

改行を削除する

各スタイル属性を確認し、不要なハードリターンを削除します。最後のセミコロンを削除することもできます。

前に：

 ＃容器{
    マージン: 5px ;
    パディング: 5px 10px 30px 18px ;
}

後：

 #コンテナ{マージン: 5pxパディング: 5px 10px 30px 18px }