Minifying CSS

Over half of my game is CSS.

This is after the game is minified.

Only a third of my game is Javascript when minified.

It is hard to shorten the names of properties in the CSS rules. I also have lots of icons made using CSS.

I would like to convert several individual CSS properties to 'shorthand' properties like 'animation'. Some of the CSS minifiers do something like this. But, I have empty CSS rules within which I set styles using JavaScript. The minifiers would remove these empty rules, by default. I also rely on some CSS rules being at the start and in a particular order so I can change the styles easily with JavaScript. Because of this, I only use the CSS minifiers on parts of my CSS. This can be a bit hard to manager.

I decided to remove most CSS properties with vendor prefixes when 'minimising' my game. I use a 'sed' script to do this.

The CSS minifiers do not shorten id and class names. In my other web pages, I used to have a list of names that I would shorten using 'sed'. This included CSS id's and class names. I stopped doing this when I started splitting up the JavaScript into lots of separate files. The JavaScript uses some of these CSS names. I would now have to run 'sed' on all the files. Luckily, my game is all one HTML page. For my game, I run both 'sed' scripts and a CSS minifier. Overall, my game is shrunk from about 14 megabyte to 2.5 megabytes.  This reduction is not quite enough, as some free web hosting servies have a 2 megabtye limit on page size.

Manually running CSS, HTML and JavaScript minifiers takes time. I have to run online minifiers through the  computers in my local public libraries.  I do not have internet access at home.  Using the onine minifiers makes it harded to 'move fast and break things' like Facebook's motto.



 

Comments

Popular posts from this blog

Running minifiers twice

Smooth scrolling

Using 'JSMin' to remove commented-out code from JavaScript