ドキュメント用CSSの重複・未使用コード削除と論理プロパティへの統一

2026年05月05日 01:10 JST shoelace-style/webawesome

https://github.com/shoelace-style/webawesome/pull/2354

WebAwesomeのドキュメントサイト向けCSS（docs.css / utils.css）から重複ルールセットや未使用セレクタを除去し、物理プロパティを論理プロパティに統一するクリーンアップが行われました。ファイル全体で約180行の削減となっています。

背景

docs.css と utils.css の2ファイルには、重複したルールセットや参照されていないレイアウトクラス・セレクタが蓄積されていました。また、--wa-brand-orange や --wa-brand-grey などのブランドカラー変数が docs.css 側に定義されており、ユーティリティ変数として本来あるべき utils.css とは分離されていた状態でした。メディアクエリやコンテナクエリのブレークポイントに px 単位が使われていた点も、スケーラビリティの観点で整理対象となっていました。

これらの問題が複合的に存在していたため、CSSの保守性が低下しており、今回のPRで一括してクリーンアップが実施されています。

技術的な変更

今回の変更は、大きく「変数の移動」「物理プロパティから論理プロパティへの置き換え」「未使用コードの削除」の3つに分類できます。

ブランドカラー変数の移動として、docs.css の :root に定義されていた --wa-brand-orange と --wa-brand-grey が utils.css の対応するカスタムプロパティブロックへ移されました。

変更前（docs.css）:

:root {
  --wa-brand-orange: #f36944;
  --wa-brand-grey: #30323b;

  /* layout-based example style aspects */
  --layout-example-border: ...;
}

変更後（utils.css）:

--line-length-none: none;

--wa-brand-orange: #f36944;
--wa-brand-grey: #30323b;

--brand-web-awesome-orange: var(--wa-brand-orange);

物理プロパティから論理プロパティへの置き換えでは、方向に依存した物理プロパティが書字方向に依存しない論理プロパティへ統一されています。主な置き換えは以下のとおりです：

width → inline-size
height → block-size
max-width → max-inline-size
padding-top → padding-block-start
border-bottom → border-block-end

あわせて、padding-top: 0px のように単位付きのゼロ値が padding-block-start: 0 へ修正されています。

未使用コードの削除では、.nav-products-secondary .pseudo-product wa-icon のセレクタブロックや未使用のレイアウトクラス、重複ルールセット、無効なメディアクエリ構文が除去されました。ブレークポイント値は px から rem へ切り替えられており、ビューポートおよびコンテナクエリの両方が対象となっています。

設計判断

論理プロパティへの統一は、将来的な多言語・双方向テキスト（RTL）対応を念頭に置いた方針です。width や height といった物理プロパティは文書の書字方向に関わらず同じ軸を指しますが、inline-size や block-size は書字方向に追従するため、レイアウトの柔軟性が高まります。コメントも max-width から max-inline-size へ合わせて更新されており、コードとドキュメントの一貫性が保たれています。

ブランドカラー変数を utils.css へ集約した点は、「変数の定義場所をその役割に合ったファイルに置く」という関心の分離の原則を適用したものです。docs.css はドキュメントレイアウト固有のスタイルを担い、再利用性の高いユーティリティ変数は utils.css で一元管理するという境界が明確になりました。

ブレークポイントの px から rem への変換は、ユーザーがブラウザのフォントサイズを変更した際にレイアウトのブレークポイントが追従するという利点があります。これはアクセシビリティ向上の観点とも一致しています。

まとめ

今回のクリーンアップは機能変更を伴わないリファクタリングですが、物理プロパティから論理プロパティへの統一と変数の適切な配置により、CSSの保守性と国際化対応の基盤が整いました。ドキュメントCSSの削減（約180行）と責務の明確化は、今後のスタイル変更コストの低減に直接つながる投資です。