#Node #CSS #Build #CssMin #CSSO

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');

var compressed = csso.minify('.test { color: #000000; }');
console.log(compressed); // .test{color:black}

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.

#Node #CSS #Build #CssMin #CSSO