ヘルプ - CSS最適化

CSS最適化とは何ですか

CSS最適化は、CSSファイルのダイエット、分離、統合を行って、より小さく見通しの良いCSSファイルを作るお手伝いをします。
例えば、定義しているにも関わらず使用していないセレクタ(未使用セレクタ)を削除したり、複数のCSSファイルで重複定義されているセレクタ(重複定義セレクタ)を統合することができるようになります。

HTMLページ解析　：　HTMLページと外部参照CSSファイルをチェックし、未使用セレクタや重複定義セレクタを検出します。
CSSファイル比較　：　2つのCSSファイルを比較し、重複定義セレクタを検出します。

CSSTidyとは違うのですか

CSS最適化は、HTMLページやCSSファイルを同時に解析して、未使用セレクタや重複定義セレクタの検出を行う点に特徴があります。 CSSTidyはCSSファイル単体の最適化に優れています。

セレクタ使用率が大きいほど良いのですか

必ずしもそうとはいえません。
セレクタ使用率とは、定義済みCSSセレクタのうち、HTMLページ中で使用されているものの割合です。この指標が想定しているのは、ページの更新を繰り返した結果、製作者の意図に反して未使用セレクタが増え、CSSファイルが肥大化するような場合です。異なるHTMLページで1つのCSSファイルを共有すると、セレクタ使用率は低下すると考えられます。しかし、メンテナンス性などの観点からは正しい場合もあります。

セレクタ使用率は、CSS最適化アルゴリズムの誤検出によって上下する場合もあります。この問題については、「解析アルゴリズムとバージョンについて」もご覧下さい。

重複定義率が小さいほど良いのですか

必ずしもそうとはいえません。
重複定義率とは、定義済みCSSセレクタのうち、複数のCSSファイルに出現する同名セレクタの割合です。この指標が想定しているのは、製作者が意図していない重複定義が増えて、メンテナンス性が悪化する場合です。

解析アルゴリズムとバージョンについて

バージョン	既知の問題点	修正・変更点
0.2	子孫セレクタを子セレクタのように扱う子セレクタ(例：div > span)に対応していない隣接セレクタ(例：div + span)に対応していない	定義ブロック｛...｝が空のときにセレクタを認識しない不具合の修正 @importによるCSSファイルの解析 HTML文書中(内部参照)のCSS宣言を解析
0.1	子孫セレクタを子セレクタのように扱う子セレクタ(例：div > span)に対応していない隣接セレクタ(例：div + span)に対応していない定義ブロック｛...｝が空のときにセレクタを認識しない @importによるCSSファイルを解析しない HTML文書中(内部参照)のCSS宣言を解析しない

用語の説明

セレクタ

スタイルを適用する対象。例) body、#sample-id、.sample-class

プロパティ

スタイルの種類。例) border、color、margin。

未使用セレクタ

CSSファイル等で定義されているにも関わらず、HTMLページ中に適用対象が無いセレクタ。

重複定義セレクタ

複数のCSSファイルで出現する同一セレクタ。さらに、1)定義ブロック｛...｝が同じであるもの、2)定義ブロックが異なるもの、に分けられます。 CSS最適化では、CSSファイルを解析した際に、これらの内容を出力します。

セレクタ使用率

(HTMLページ中で使用されているセレクタ数) ÷ (定義されているセレクタの総数)

重複定義率

(複数のCSSファイルで出現する同一セレクタの数) ÷ (定義されているセレクタの総数)

スコア

(セレクタ使用率) － (重複定義率)

運営会社・お問合せ先

開発・運営：ジューベー株式会社

CSS最適化に関するお問い合わせは、当社お問い合わせページよりご連絡ください。

CSSファイルのダイエット、分離、統合

目次