CSSのリファクタリングを手軽にしてみた

こんにちは！パン君です。

機能追加やデザイン変更を繰り返しているうちにCSSファイルの中に 「これ、どこで使ってるんだっけ？」 というクラスが増えてきました。

• デザイン案Aで書いたけど、結局B案にしたから使わなくなったボタンのクラス
• 共通化しようとして作ったけど、結局固有クラスを使ったから放置されたスタイル

などなど。
放置しても動くのですがファイルサイズも無駄ですし何より精神衛生上よろしくありません。

そこで今回はこれらをリファクタリングすることにしました。

手動で探すのは無理

とはいえCSSファイルに書かれているクラス名を一つずつ検索して「使用箇所ゼロ」を確認するのは苦行です。
世の中には PurgeCSS などの便利なツールもありますが、ビルドプロセスに組み込むのが少し大変だったり設定が複雑だったりします。

今回は 「もっと手軽に、ざっくりでいいから不要なものを消したい」 というモチベーションだったので、Node.jsで簡単なスクリプトを書いて検出することにしました。

自作スクリプトの方針

1. assets/css/ フォルダ内のCSSファイルを全部読み込む。
2. 正規表現でクラス名（.classname）とID名（#idname）を抽出する。
3. プロジェクト内の全ファイル（HTML, JS, MDなど）をスキャンする。
4. 「抽出したクラス名が、どのファイルにも一度も登場しない」場合、それを未使用候補として出力する。

これだけです。厳密な構文解析（AST）などはせず、単純な文字列検索（includes）で判定します。
その分「クラス名と偶然同じ単語が文章中にあったら検知漏れする」という弱点はありますが、 「使っていないものを安全に削除する」 という目的には十分です。

// tools/find-unused-css.js (抜粋)

const cssContent = fs.readFileSync(cssFile, 'utf8');
const selectors = extractSelectors(cssContent); // 正規表現で抽出

selectors.forEach(sel => {
    let isUsed = false;
    for (const content of contents) {
        // 単純な文字列検索
        if (content.includes(sel.name)) {
            isUsed = true;
            break;
        }
    }

    if (!isUsed) {
        console.log(`[UNUSED] ${sel.name}`);
    }
});

実行結果

スクリプトを実行してみるといくつかの未使用クラスが見つかりました。

Checking assets\css\layout.css...
  [UNUSED] .section--soft

Checking assets\css\top.css...
  [UNUSED] .btn-outline

確認してみると
section--soft は初期デザイン案で作ったカードのバリエーション
btn-outline は枠線のみのボタンで現在は塗りつぶしボタンしか使っていませんでした。

これらは完全に不要なので迷わず削除！
CSSファイルが少しスリムになりました。

まとめ

リファクタリングというと大掛かりな作業をイメージしがちですが、
「気になったら小さなスクリプトを書いてサクッと調べる」
というアプローチなら日常的にコードをきれいに保てそうです。

自分の手で作ったツールで自分のサイトを改善していくのは、エンジニアならではの楽しみですね。