CSS Minifiers Comparison

Continuing on from evaluating the set of modules available for JavaScript minification, the need for CSS minification seemed an easy secondary solution that would help in reducing the noise being sent over the wire to the client browser. The evaluation was also more simple than the JavaScript - looking for (1) does it result in valid CSS, (2) does it remove block comments and (3) does it remove important block comments.

Comparison Set

Scroll down, or click on the links in the table above to jump to the live-demo of each class involved.

Rodrigo54

https://gist.github.com/Rodrigo54

Code implementation is very simple:

rodrigo54-css.php :: Rodrigo54

require_once 'rodrigo54-minifier.php'; // or whatever filename you chose
$jz = new Rodrigo54();

$minifiedCode = $jz->minify_css($css);
// or $minifiedCode = $jz->minify_css($css);
// or $minifiedCode = $jz->minify_html($html);

• Very easy deployment (note I decided to clipboard the raw-code into a Rodrigo54 class so that I could use it as an external class in my packages).
• Very simple and easy to understand code involving a set of regex's.
• Handles HTML and CSS as well as JavaScript.
• Does what is says on the tin.
• Handles important comments (no option to turn this off).

Cons

• No version number in the code or download, so you don't know if you're using older code.
• Removes redundant semi-colons sometimes (see demo)

PHPClasses package/9865

https://www.phpclasses.org

Code implementation is very simple:

phpclasses-css.php :: PHPClasses/9865

require_once 'phpclasses9865/CssMinifier.phpclass'; //
$minifier        =  new  CssMinifier () ;
$minifiedCode    =  $minifier->Minify( $css ) ;
// or $minifiedCode    =  $minifier->MinifyFrom( $filename ) ;

The output comes in multiple lines.

Pros

• It will remove comments.¹

Cons

• Download requires a PHPClasses.org login before you can evaluate the solution.
• PHPClasses documentation and download area is a disaster and difficult to navigate.
• Strange use of .phpclass files (something I'm not familiar with).
• Documentation.
• Removes important comments (no obvious way to disable this).
• Retains redundant semi-colons
• No version number in the code or download, so you don't know if you're using older code.
• Not clear if any fixes have been applied to this code since first posting.

MatthiasMullie

https://github.com/matthiasmullie

This extension reduces the page size by removing unused white-spaces and comments in the HTML output.

Code implementation is very simple:

matthiasmullie-css.php :: MatthiasMullie

require_once 'MatthiasMullie/src/Minify.php';
require_once 'MatthiasMullie/src/CSS.php';
require_once 'MatthiasMullie/src/JS.php';
require_once 'MatthiasMullie/src/Exception.php';
require_once 'MatthiasMullie/src/Exceptions/BasicException.php';
require_once 'MatthiasMullie/src/Exceptions/FileImportException.php';
require_once 'MatthiasMullie/src/Exceptions/IOException.php';
require_once 'path-converter/src/ConverterInterface.php';
require_once 'path-converter/src/Converter.php';

$minifier = new Minify\CSS();
$minifier->add($css);

// or ....

//$sourcePath1 = '/path/to/second/source/css/file1.js';
//$minifier->add($sourcePath1);
//$sourcePath2 = '/path/to/second/source/css/file2.js';
//$minifier->add($sourcePath2);


// save minified file to disk
//$minifiedPath = '/path/to/minified/js/file.min.js';
//$minifier->minify($minifiedPath);

// or just output the content
$minifiedCode = $minifier->minify();

• Removes comments
• Removes redundant semi-colons

Cons

• Deployment isn't as easy as the other classes.
• Multi-line output.
• Breaks grid-template-areas: by removing line breaks.

CSSTidy

(v2.0.3)

https://github.com/Cerdic/CSSTidy

Code implementation is a simple download:

csstidy-css.php :: CSSTidy

include('csstidy/class.csstidy.php');
$csstidy = new csstidy();

// Set some options :
$csstidy->set_cfg('optimise_shorthands', 2);
$csstidy->set_cfg('template', 'high');
$csstidy->set_cfg('sort_selectors', true);
$csstidy->set_cfg('merge_selectors', true);
$csstidy->set_cfg('compress_colors', true);
//$csstidy->set_cfg('discard_invalid_selectors', true);
//$csstidy->set_cfg('discard_invalid_properties', true);

// Parse the CSS
$csstidy->parse($css);

// Get back the optimized CSS Code
$minifiedCode = $csstidy->print->plain();

Although there is no documentation, I can see the following $csstidy->set_cfg(k,v) options in the code:

php :: title

set_cfg('remove_bslash', $bool);
set_cfg('compress_colors', $bool);
set_cfg('compress_font-weight', $bool);
set_cfg('lowercase_s', $bool);
set_cfg('optimise_shorthands', $bool);
set_cfg('remove_last', $bool);
set_cfg('space_before_important', $bool);
set_cfg('case_properties', $bool);
set_cfg('sort_selectors', $bool);
set_cfg('merge_selectors', $bool);
set_cfg('reverse_left_and_right', $bool);
set_cfg('discard_invalid_selectors', $bool);
set_cfg('discard_invalid_properties', $bool);
set_cfg('css_level, $levelCd); // e.g. CSS1.0|CSS2.0|CSS2.1|CSS3.0)
set_cfg('preserve_css', $bool);
set_cfg('timestamp', $bool);
set_cfg('template, $levelCd); // e.g. highest|high|low

Pros

• Versions visible in GitHub.
• Lots of options.
• Removes comments.
• Removes redundant semi-colons.
• Merges selectors (but in the test it only worked if they are adjacent).

Cons

• Documentation lacking.
• Deployment isn't as easy as the other classes.
• Multi-line output.
• Breaks grid-template-areas: by removing line breaks.