Optimize Your CSS With RequireJS

Gotta be honest. I just don’t agree with: “While preprocessors continue to become increasingly popular, there are still plenty of folks who stick with regular CSS. In these cases, a solid build tool/process is vital.” Even plain CSS is easy to keep track of, maintain, and expand. It’s just…easy. It’s not Java, Cobol, Perl, etc. Even when it’s 10 sheets and 1000s of lines, I’ve never had trouble working with it. It helps that I’ve been messing with CSS for well over a decade now, but still. I don’t get all this talk about needing to optimize and simplify CSS…the world’s easiest “language” that isn’t even a language.

What did you do to get the “tree” command in Terminal?

What I love from Jeffrey is he can explain -the simple and the easy way- what thing are… how they are work… maybe that’s why they call him, Jeffrey Way!

HI, Jeff. Thanks for great tutorials! My question is. What is a terminal and color scheme in your tutorial?

Interesting to see how different people approach these things

Currently I use Less Parser for Windows. It watches the diretory I’m working on, compresses the files and outputs the css. It understands imports too so you can segment your style sheets. So I’d keep a file for colours, grid structure etc that the main file reads and then uses when they’re referenced. You could use that for normal css too. You wouldn’t have to take advantage of the less way of developing.

Then when it comes times to deploy I only move the css files as the rest are js.

Interesting approach though.

I know this is an old post, but I couldn’t resist adding my 2 cents in. I’ve tried using r.js, but to me it seems a big waste of time, for simply trimming down CSS. What I use, is a .php script, and a .htaccess rule (not required, but for esthetic purposes)

.htaccess:

RewriteRule ^css_min/(.*)$ css_min.php?file=$1 [L,NC]

css_min.php:

<?

ob_start(“ob_gzhandler”);
header(“Content-type: text/css; charset: UTF-8″);
header(“Cache-control: must-revalidate”);
$offset = 60 * 60;
$expire = “Expires: ” . gmdate (“D, d M Y H:i:s”, time() + $offset) . ” GMT”;
header($expire);

$file = $_GET["file"];
$fp = fopen($file, “r”);
while(!feof($fp)) {
$data = fgets($fp, 1024);
$css .= $data;
}
fclose($fp);

//echo “Before:”.mb_strlen($css);
$css = preg_replace(“!/\*[^*]*\*+([^/][^*]*\*+)*/!”, “”, $css);
$css = str_replace(array(“\r\n”, “\r”, “\n”, “\t”, ” “, ” “, ” “, ” “), “”, $css);
$css = str_replace(‘; ‘, ‘;’, $css);
$css = str_replace(‘: ‘, ‘:’, $css);
$css = str_replace(‘, ‘, ‘,’, $css);
$css = str_replace(‘ {‘, ‘{‘, $css);
$css = str_replace(‘{ ‘, ‘{‘, $css);
$css = str_replace(‘ }’, ‘}’, $css);
$css = str_replace(‘} ‘, ‘}’, $css);
echo $css;
//echo “<br/>After:”.mb_strlen($css);

?>

I know, it’s not the most elegant way to code a .php file, but it works, and I didn’t waste a lot of time writing the function.

What this allows me to achieve, is to remove newlines, spaces etc, but most important of all – to compress the actual file itself using gzip. For example I have a style sheet right now that is 8.00 KB (8,192 bytes), and after the .css file runs through the css_min.php file, the size becomes 1.43 KB (1,461 bytes).

In my opinion that’s a big improvement. And from my standpoint, as a developer, I can simply change the css include path to a compressed version or the original one, if I’d want to view the source from the browser (it happens sometimes), and because I cache the compressed version – it only runs once for a certain time frame. So no command lines, routine scripts or workarounds to compress my css files, it’s just a matter of pointing to /css/style.css or /css_min/style.css