CSS ファイルの最小化を止めた

まず、変更前の PostCSS 設定（CSSNANO に関する部分のみを抜き出したもの）はこちら。

{
	"plugins": {
		"cssnano": {
			"preset": [
				"default",
				{
					"cssDeclarationSorter": false,
					"minifySelectors": false
				},
			],
		}
	}
}

CSSNANO のデフォルト設定(cssnano.co)をベースに、 cssDeclarationSorter(cssnano.co)と minifySelectors(cssnano.co)を無効にしています。

• ちなみに minifySelectors を無効化していた理由は、 ::before, ::after など CSS2 から存在する疑似要素のセレクターが :before, :after のようにシングルコロンに変換されてしまうからです。 CSS の疑似要素モジュール仕様の 7. Compatibility Syntaxにおいて、ブラウザはシングルコロンも受け入れるべきであるとされているため、ブラウザは将来的にも旧構文のサポートを続けることが期待できますが、1バイト節約できるからといって古い構文に変換されるのは私の望むところではありません。仕様とブラウザは後方互換性を考慮すべきですが、 Web ページの CSS を閲覧するユーザー（訪問者）は歴史的経緯を学ぶ必要はなく最新の構文だけ理解していれば良い（ので古い構文を提示するのは望ましくない）と考えています。

この設定でファイルサイズは下表で示すようになります。

次に、 CSSNANO による最適化を一切しない設定にしてみました。

{
	"plugins": {
	}
}

ファイルサイズは Brotli 圧縮後の比較でも 6.42 KB → 8.83 KB と、 37.4% も増加してしまいました。

CSSNANO の適用有無によるファイルサイズ変動の原因のほとんどは CSS コメントの存在によるものです。もし将来的にスタイルガイドを自動作成するための長大なコメントを含めるようになるなど更なる容量増加の可能性もあり、さすがに許容できません。いずれにせよコメントのほとんどは制作上のメモであり、閲覧ユーザーにとって役立つものではないので除去したいところです。

CSSNANO にはいくつかのプリセットが存在しますが、このうち cssnano-preset-lite(www.npmjs.com)は

• コメントの除去
• 空ルールの除去（.foo { } のようにプロパティリストが空なものを消す）
• 空白や改行の除去

といった最低限の最適化を行うものであり、自分の欲求に近いものとなっています。このため、 lite プリセットをベースに空白除去のみ無効にすることで「最小化を止めつつファイルサイズの増加は最小限にとどめる」という目的を達成することができそうです。

{
	"plugins": {
		"cssnano": {
			"preset": [
				"lite",
				{
					"normalizeWhitespace": false
				}
			]
		}
	}
}

これだけでも良いのですが、 PostCSS の吐き出す CSS は次のように違和感のあるフォーマットとなってしまいます。

.foo{
	hoge:value;
	fuga:value
}
.foo::before{
		piyo:value;
	}

個人の好みの範囲内ではありますが、馴染みのあるフォーマットにするため、追加で専用の整形ツールを適用させることにします。制作時に使用している Prettier(prettier.io)であれば設定も含めてそのまま流用できるため、 PostCSS のビルドによるファイル変更を検知して prettier コマンドを実行させる記述を package.json に書き加えます。

{
	"scripts": {
		"_css:build": "postcss public/style/_src/*.css --base public/style/_src -d public/style",
		"_css:format": "onchange -f add -f change -v public/style/*.css -- prettier {file} --write",
		"_css:compress": "onchange -f add -f change -v public/style/*.css -- brotlin compress {file} -m 1",
		"css": "run-p _css:*",
	}
}

これで出力される CSS ファイルはこんな感じになります。

.foo {
	hoge: value;
	fuga: value;
}
.foo::before {
	piyo: value;
}

Brotli 圧縮後のファイルサイズは最小化していた時と比べて 6.42 KB → 6.57 KB と、 2.3% の増加にとどまっています。この程度なら大きな問題はないでしょう。

最終的にファイルサイズの変動をまとめるとこうなりました。

最小化を止めることにより CSS を直接閲覧した時の見やすさのメリットと、ファイルサイズが増加するデメリットを天秤に掛けると、コメントさえ除去してしまえば転送量の増加はわずかに抑えることができ、 Brotli 圧縮を行う環境下においてはバランスが優れているのではないかと思います。