Hi there, I just discovered CSSO – CSS Optimizer and I thought I would check out how it compares to other css minification tools like cssmin which is based on YUI compressor.
Installation
Its a node package, installation is as straight forward as:
$ npm install -g csso |
Usage
You can minify your CSS by using csso.minify(yourCss)
.
Example:
var csso = require('csso'); |
Basic comparison with cssmin
CSSO does more than just remove whitespaces and line breaks which is what cssmin based on YUI compressor does. In my opinion that’s already good enough of a reason to use it.
Let’s look at how good of a job it does.
For my quick test, I have used 2 css files.
- Simple CSS File: My blog’s CSS at time of writing is a pretty simple 900 lines css file.
- Complex CSS File: Materialize main CSS which is a fairly complex 11256 lines stylesheet.
Here are the results:
Metric | Simple CSS File | Complex CSS File |
---|---|---|
Lines | 842 | 11256 |
Length | 19133 | 201025 |
cssmin length (characters) | 15431 | 147778 |
csso length (characters) | 15405 | 145423 |
cssmin compression (%) | 19.3% | 26.5% |
csso compression (%) | 19.5% | 27.7% |
CSSO does a bit better than cssmin but the difference is negligible. I certainly wouldn’t go ahead and change my current projects over to CSSO but I will give CSSO a try for my next project.