CSS ファイルのコメント除去を止めた

投稿

本ブログではアクセシビリティの観点から2022年に CSS ファイルの最小化を取り止めています。この時は CSSNANO(cssnano.github.io) の lite プリセットをベースにコメントと空ルールの除去のみを行う設定をしていました。

しかし CSS のコメントには本来ユーザーに見せるべきものと見せなくても良いものがあります。見せるべきものの代表例として、特定環境向けにやむを得ず指定している宣言が挙げられます。IE 対策が必要だった時代と比べれば、現代では特定環境向けの記述はだいぶ少なくなってきてはいるのですが、全廃は困難でしょう。本ブログではいわゆるリセットスタイルのひとつとして、href 属性のない <a> 要素に対して以下のルールセットを書いています。

a:not(:any-link) {
  color: inherit;
} /* for iOS Firefox with Website Dark Mode https://github.com/darkreader/darkreader/issues/9836 */

コメントにはこのルールセットを書いた理由と GitHub Issue の URL を含めています。これをビルド過程でコメント除去してしまうとどうなるでしょうか。

a:not(:any-link) {
  color: inherit;
}

これを見たユーザーはきっと混乱してしまうでしょう。制作者（私）はいったい何のためにこのルールセットを書いているのか。この不可解なルールをユーザースタイルシートで上書きすることで、何か不具合が起こったりしないだろうかと考え込んでしまいます。つまりアクセシビリティ上の問題であるため、このようなコメントはビルドに際しても除去せずに残しておくべきです。

逆に Lint ディレクティブやスタイルガイド用のコメントのように制作上の都合で書いたに過ぎないものや、あまりにも長大でファイルサイズに影響しすぎるもののように、除去したほうが望ましいコメントもあるでしょう。

CSSNANO が内部的に使用している postcss-discard-comments(GitHub) では remove オプションを使うことで、コメントのフォーマットによって除去／保持を決定できます。たとえば Stylelint の除外コメント(stylelint.io)のみ除去するなら次のように設定します。 

/* postcss.config.js */
import pluginDiscardComments from 'postcss-discard-comments';

/** @type {import('postcss-load-config').Config} */
export default {
  plugins: [
    pluginDiscardComments({
      remove: (comment) => comment.startsWith('stylelint-'),
    }),
  ],
};

本ブログの CSS (blog.css) において、コメントをすべて除去、ユーザーに見せるべきもののみを保持（選定して保持）、すべて保持の3パターンを試したところ、ファイルサイズは下表のとおりになりました。

ファイル名 すべて除去 選定して保持 すべて保持
blog.css 46.3 KB (47,454 バイト) 52.2 KB (53,515 バイト) 56.4 KB (57,794 バイト)
blog.css.br 7.41 KB (7,543 バイト) 9.17 KB (9,394 バイト) 9.75 KB (9,988 バイト)

すべて除去していた従来と比べて、選定して保持すると無圧縮ファイルの比較では約1割増しですが、Brotli 圧縮ファイルの比較だと約2割増しとなりました。ルールセットと比べてコメントは圧縮と相性が悪いのか、予想以上に増加してしまう結果となったのですが、これは必要なコストだと認識しています。