What is Minification?

In web development it's often adventageous to minify embeded files. Minification refers to the process of removing all unnecessary characters while leaving the core functionality in tact. The end result is a new file which is smaller in filesize to the original, yet identical from a machine perspective. The core benefit to smaller files is that they require less bandwidth and are faster for the client to download. Although not intended, the minification profess can make code more difficult for humans to read, which is why minification can also been seen as light weight obfuscation.

Here at data·yze we use PHP to push files from our development enviornment to production. We opt to automate the minification process during this push step. This gives us all of the benefits of minimization without the drawbacks. Our users get the smaller, faster to download version of the code. Our developers working in the testing enviornment work with the larger, more human readable version of the code.

At data·yze, minimizing CSS reduces the size of our CSS files by 20-23% on average. Here is the code we use:

Minimizing CSS

function minimizeCSS($css){ $css = preg_replace('/\/\*((?!\*\/).)*\*\//', '', $css); // negative look ahead $css = preg_replace('/\s{2,}/', ' ', $css); $css = preg_replace('/\s*([:;{}])\s*/','$1',$css); $css = preg_replace('/;}/','}',$css); return $css; }

So what's going on here?

Line 3 is the real meat of the expression. The function preg_replace is looking for any string that matches the regular expression, \/\*((?!\*\/).)*\*\/, and removes it from the $css string. \/\* and \*\/ match the /* and */, start and end comment delimiters in CSS respectively. Both /, and * are special characters and need to be escaped. The middle part, ((?!\*\/).)*, preforms a negative look ahead. The expression matches any string (.) so long as the expression (\*\/), the CSS end comment delimiter is not in it.

The rest of the code is pretty straight forward. Line 4 collapses white space. Line 5 removes white space where it's not needed, and line 6 removes the final semicolon since it's not needed. If we want to be pedantic, lines 4 - 6 could be merged into a single statement using a 3 element array for all the regular expressions and another for the replacements. I, personally, prefer to have one non-trivial regular expression per line. Keeping lines seperate makes the code more readabile, which makes it easier to debug and modify. The code only executes when our developers are ready to push changes to production. Since the code isn't client facing, the potential improvement in proformance isn't worth the hit to readability.

Let's see it in action with the following example:

/* crazy ** / ** test */ body { /* who would write css like this? */background: white !important;} a { color :blue ; }
The above is test is pretty crazy and test all our corner cases: (1) Two comments on a single line, (2) extra astrics and slashes in a comment, (3) a nessary white space that shouldn't be removed and (4) a comment that spans multiple lines. Running the CSS through our CSS minified gives us:
body{background:white !important}a{color:blue}


The Complete Minification Article Series: