CSSの圧縮
[Water.css][watercss]に感化されて開発を始めた私ですが、他の開発者のファイルが小さいのは何故かという素朴な疑問を持ちました。
○○○.min.×××？
ライブラリ等を使っているとしばしば見掛けるこの"○○○.min.×××"という名前。
正直気にもしませんでした。
jQueryにしろ何にしろ、そうあるからそう使っているだけでした。
Water.cssを覗き見
すると、minは改行などの無駄な文字列を消し小さくしたものだと気付きました。
そして、これこそがファイルが小さく済む理由なのだと理解しました。
実際にしてみる
｢CSS 圧縮｣
出てきたのは沢山のツールたち。
オンラインで使うものもあれば、コマンドで実行するものもありました。
取り敢えず私は、[refresh-sf.com][refresh]を使ってみました。
すると、1,000文字近く短くなったのです。
| 状態 | 行数 | 文字数 | 比率 |
|---|---|---|---|
| 圧縮前 | 244 | 3,587 | 1(△0%) |
| 圧縮後 | 1 | 2,227 | 0.63(△37%) |
行数については置いておいて、これはとても驚きました。
しかし納得はできなかった
だが、実際に圧縮後のソースを読んでみると、まだまだ小さくなれそうです。
オンラインなどは汎用的なシステムであるが故に、後から上書きするから取り敢えず最初に0にしておくだとか、そういった処理はなされません。
酷いとこにあっては、同じ値が6箇所も充てられていました。
それを無くすだけでも十分に小さくなります。
自力で小さくしてみる
今回私が圧縮を試みたのは開発中の[Doc.css][github]です。
一部の要素に対して作用し、可読性を高める目的で開発を始めました。
だからこそ、こういった規則性があるだとかは自分が一番知っています。
なので私は、自力で小さくしようと考えました。
display値で絞る
今回、[Doc.css][github]により影響を受ける要素はそこまで多くなく、displayがblockであるものに関しては基本的に同じmarginやpaddingを与えています。
なのでまずはdisplayがblockか否かでグループ分けをしてみました。
| displayの値 | タグ |
|---|---|
| block | blockquote,button,code,h1,h2,h3,h4,h5,h6,hr,img,ol,p,table,textarea,ul |
| blockじゃない | a,li,tbody,td,tfoot,th,thead,tr |
tableに関しては諸事情でblockに分類されましたが、のちほど上書きするので気にしません。
特有の値を除外する
例えばcolorだとかoutlineだとか、意図的に一部の要素にのみ充てたい値があります。
それだけを選出し、一時的にファイルの後ろの方に追いやりました。
こうすることで特有でない値が残る
ので、どれが共用可能かがはっきりします。
編集後
大分小さくなりました。
作業のために改行はしてありますが、ここで圧縮前後と比較してみます。
| 状態 | 行数 | 文字数 | 比率 |
|---|---|---|---|
| 圧縮前 | 244 | 3,587 | 1(△0%) |
| 圧縮後 | 1 | 2,227 | 0.63(△37%) |
| 編集後 | 38 | 1,716 | 0.48(△52%) |
圧縮後のファイルから文字数を500近くの削減に成功しました。
では最後に、改行を処理したものも比較してみます。
| 状態 | 行数 | 文字数 | 比率 |
|---|---|---|---|
| 圧縮前 | 244 | 3,587 | 1(△0%) |
| 圧縮後 | 1 | 2,227 | 0.63(△37%) |
| 編集後 | 38 | 1,716 | 0.48(△52%) |
| 最終版 | 1 | 1679 | 0.47(△53%) |
最終的に、53%近くの削減に成功しました。
感想
共用化可能な部位を探すのは単純に頭の体操になるだけでなく、プログラムを組む上でも大分重要な観点だろうと思いました。
こことここは共用化できる、ここは無理そうだと、そういった判断は実際の仕事の上でも活用できます。
便利なツールに頼るのは楽ですが、たまにはこうして一手間かけてみるのも良いものだなと感じました。
最後に
今回、私が開発を進めたCSSはDoc.cssと名付け、[Github][github]上に公開した。
特徴としては以下が挙げられる。
- 一部の要素に対し適用される。
- 圧縮版は2kB以下と小型である。
- ドキュメントとして読みやすい。(←私的見解)
サンプルは[こちら][demo]から確認できるので、是非ともご覧頂き、感想や意見、指摘を頂きたい。
[demo]: https://re-frain-org.github.io/?key=Doc-CSS&page=content
[github]: https://github.com/re-frain-org/Doc.css/
[refresh]: http://refresh-sf.com
[watercss]: https://watercss.netlify.com/