CSSショートハンド最適化 — 冗長な宣言の統合

CSSショートハンド最適化

CSSのショートハンドプロパティは、複数の関連する値を1つの宣言で設定できます。圧縮ツールは冗長なロングハンド宣言を検出し、同等のショートハンドに統合して、ファイルサイズと冗長性の両方を削減します。

一般的なショートハンドの統合

MarginとPadding：

/* ロングハンド */
.box {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
}

/* ショートハンド */
.box {
  margin: 10px 20px;
}

ショートハンドmarginの値は上 右 下 左のパターンに従います。上と下が等しく、右と左が等しい場合は2つの値に統合されます。4つすべてが等しい場合は1つの値に統合されます。

Background：

/* ロングハンド */
.hero {
  background-color: #f0f0f0;
  background-image: url(bg.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* ショートハンド */
.hero {
  background: #f0f0f0 url(bg.png) no-repeat center / cover;
}

Font：

/* ロングハンド */
.text {
  font-style: italic;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  font-family: Arial, sans-serif;
}

/* ショートハンド */
.text {
  font: italic 700 16px/1.5 Arial, sans-serif;
}

ショートハンド最適化が安全でない場合

ショートハンドプロパティは省略されたサブプロパティを初期値にリセットします。これは意図しない副作用を引き起こす可能性があります：

/* 元の意図：background-colorのみ変更 */
.card {
  background-image: url(pattern.svg);
  background-color: white;
}

/* 安全でないショートハンド統合結果： */
.card {
  background: white;
  /* background-imageが'none'にリセットされる！ */
}

cssnanoのようなスマートな圧縮ツールはこれを検出し、同じルールブロック内ですべてのサブプロパティが明示的に設定されている場合のみショートハンドを適用します。

サイズへの影響

ショートハンド最適化は、基本的な空白除去に加えて、通常CSSファイルサイズの**5-15%**を節約します。ロングハンドプロパティを一貫して使用する冗長な手書きCSSを含むスタイルシートでは、節約効果が最も大きくなります。