CSS→SCSS変換で重複するメディアクエリを統合する方法

まず押さえること

同じブレークポイントが何度も出てくるのは、CSSの書き方の問題ではなく構造上の宿命です。CSSはルールをネストできないため、コンポーネントごとにファイルを分けるFLOCSSやBEM運用では、.c-cardにも.c-buttonにも同じ@media (min-width: 768px)を書くことになりがちです。既存サイトを引き継いでCSSをSCSSに移行しようとすると、この重複がまとまって目につきます。このツールがまとめるのは、ソース内で隣り合い、かつメディアクエリの条件文字列が完全に一致するブロックだけです。離れた場所にある同じブレークポイントを寄せるための並べ替えは行いません。ブロックの位置を動かすと、どの宣言が優先されるかが変わることがあるためです。この範囲をあらかじめ知っておくことが、結果を正しく読むための前提になります。

実践するときのポイント

まずは自分のCSSをそのまま貼り付け、隣接する同一クエリがどう1つにまとまるかを見ます。ファイル内の離れた場所にある重複は、意図的にそのまま残ります。離れたブロックもまとめたい場合は、移動してもカスケードが変わらないことを確かめたうえで、元のCSS側で隣り合わせてから貼り直してください。変換レポートの「隣接する同一メディアクエリを◯件統合しました」が、実際にまとめた件数です。

見落としやすい点

統合の判定は文字列の完全一致でのみ動くので、表記ゆれには反応しません。(min-width: 768px)と(min-width:768px)のようにコロンの後のスペース有無が違うだけでも別物として扱われ、統合されません。既存サイトのCSSに複数人が触れてきた履歴がある場合は、この表記ゆれ自体が統合を妨げていないか先に見ておくと安心です。また、統合はブロック本文の単純な連結であり、まとめた後に重複するプロパティ宣言を自動で削除するわけではありません。件数は作業の目安として受け取り、最終的には出力されたSCSSの@mediaブロックを実際に見比べて、想定どおりにまとまっているかを確認するのが確実です。

次にやること

まずは手元のCSSをそのまま貼り付けて、どこまで統合されるかを確認してみてください。次に、メディアクエリの表記ゆれ（コロンの後のスペースの有無など）を揃えてからもう一度貼り直すと、まとまるブロックが増えることがあります。ブレークポイントの数が多いプロジェクトほど、この一手間が効きます。実際の挙動を試すには、CSS→SCSS 変換ツールを開いて手元のCSSをそのまま貼り付けてみてください。

一度きりで終わらせず、必要な場面で繰り返せる手順として使うのがおすすめです。