CSSの効率的なスタイリング戦略: revert、currentColor、および aspect-ratio を活用する方法

CSSの revert 値を活用する

CSSプロパティの値を元に戻したい場合、revert を用いることが推奨されます。この値を使用することで、プロパティはスタイリングが適用される前に持っていたデフォルト値、または親要素から継承された値に「ロールバック」されます。具体的には、ある要素にカスタムスタイルを適用した後、特定の状況で元のスタイルに戻したい場合（例えば、ul、ol 要素のリストマーカーを復活させたい、あるいは a 要素のアンダーラインを再び表示させたい場合など）、revert を使えば一手間で実現できます。

使用例の改善

非推奨の書き方

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose a {
  text-decoration: underline;
}

推奨の書き方

.prose :where(ul, ol) {
  list-style: revert;
}

.prose a {
  text-decoration: revert;
}

レスポンシブデザインと revert の利用

レスポンシブデザインにおいて、メディアクエリを使用してスタイルを変更する際、revert 値は以前の設定を簡単に元に戻すのに役立ちます。これにより、特定のビューポートでのみ以前のスタイルを適用したい場合に、明示的に値を指定する代わりに revert を使用することで、より自然にそのプロパティの元の値に戻すことができます。

.for-desktop {
  display: none;
}

@media (min-width: 992px) {
  .for-desktop {
    display: revert;
  }
}

currentColor の使用

同じ要素のテキストカラーと一致する色をSVGの fill やCSSの background-color に設定したい場合、currentColor を使用することで、コードの記述量を減らし、色の管理を簡素化できます。これは、テキストの色が変わると自動的に fill や background-color の色も変わるため、手動で色を調整する手間を省くことができます。

使用例の改善

非推奨の書き方

.button[data-type='primary'] {
  color: var(--c-primary);
}

.button[data-type='primary'] svg {
  fill: var(--c-primary);
}

推奨の書き方

.button svg {
  fill: currentColor;
}

アスペクト比の維持

アスペクト比を維持しながらコンテンツをレスポンシブに表示する場合、古い方法では padding-top または padding-bottom を使用していましたが、現代では aspect-ratio プロパティを用いることで、より直接的かつ効率的にこの目的を達成できます。

使用例の改善

古い方法

.frame::after {
  content: '';
  display: block;
  padding-top: calc(9 / 16 * 100%);
}

新しい方法

.frame {
  aspect-ratio: 16 / 9;
}

このように、aspect-ratio プロパティを使用することで、コードの簡潔性を保ちつつ、柔軟で直感的なレイアウトを実現できます。

まとめ

この記事では、CSSのスタイリングを効率化するための三つの重要なテクニックについて解説しました。まず、revert 値の使用により、特定のスタイルを元の状態に戻す方法を紹介しました。この機能は、レスポンシブデザインや特定の条件下でのスタイル変更に特に有用です。次に、currentColor の利用が、テキストカラーと同じ色をSVGの fill やCSSの background-color に設定する際のコードの記述量を減らし、色の管理を簡素化する方法を示しました。最後に、aspect-ratio プロパティを使用してアスペクト比を維持しながらコンテンツをレスポンシブに表示する方法を紹介しました。これらのテクニックを駆使することで、より効率的かつ柔軟にスタイリングを行うことができるようになります。