シングルライン CSS

最近、CSS を書くときにコードのフォーマットを今までと少し変えてみてます。宣言 (プロパティと値のセット) ごとに改行するのではなく、セレクタごとに改行する、いわゆる シングルライン CSS です。つまり、

table {
  border-collapse: collapse;
  margin: 2em 0;
}
table th, table td {
  pading: 0.5em 1em;
  border: 1px solid silver;
}

↑ こうじゃなくて、

table { border-collapse: collapse; margin: 2em 0; }
table th,
table td { pading: 0.5em 1em; border: 1px solid silver; }

↑ こう。パッと見は読みづらく感じるかもしれませんが、実際に自分のコードを管理してみると意外にそんなことはなくて、すぐに慣れます。

このフォーマットにして良かったのは、まず探している箇所が見つけやすくなりました。CSS コードを読む場合、まず見るのは宣言ではなくセレクタであるはずで、その点でこのフォーマットは 1 行に 1 セレクタなので目で追うのがすごく楽です。

もうひとつは CSS モジュールの設計に良い影響が期待できること。ある程度の大きさのモジュールの場合、宣言ごとの改行だとコード上で見えているのは常にモジュールの一部でしかないのに対し、セレクタごとに改行するとモジュール全体を見通すことが容易で、しかもそれぞれのモジュールが「かたまり」として浮かび上がって見えてきます。その結果、より可搬性や独立性の高いモジュールの設計を意識しやすくなりました。

そもそもこのフォーマットを試したのは、CSS のコードがひたすら縦方向に長くなっていくところがイヤで、そこをなんとか圧縮したかったからなんですが、結果的にそれだけではなく、CSS の設計面を今までとは違った角度から見られるようになったことは大きな収穫でした。