Minifying and Obsfucating CSS similar to Javascrip

Question

I know there are several tools out there that are capable of obfuscating JavaScript files such as by turning a simple functions like:

function testing()
{
  var testing;
  var testing2;
  alert(testing+testing2);
}

into

function a(var a,b;alert(a+b);)

My question is does something like this exist for use with CSS/HTML (or is there a tool that has a similar effect)? In particular, a minification/obfuscation tool that actually renames variables and refereneces and eliminates additional white-space etc.

And if so - would the benefits in performance outweigh the readability in both CSS/HTML/JavaScript minification/obfuscation?

Answer 1

There are many online tools you can use for things like css minification. Here is an online css minifier! I found.

As for renaming css classes, I would try and avoid that as you will lose a lot of the readability from your html.

Answer 2

It is very difficult to 'minify' HTML or CSS because all that can safely be saved is white space (which doesn't amount to a huge saving). As for class renaming, you loose an important part of the web which is having semantic code (which represents meaning). I think the best option is to ensure that you have gzip compression enabled on your web server and focus on combining your assets into a single file wherever possible.

Answer 3

Take a look at html5boilerplate.com; specifically the latest source-code on GitHub.

HTML5Boilerplate's build script can minify JavaScript, CSS, and HTML for you. It doesn't rename your CSS selectors but it is probably the closest to an automated "obfuscator" you will find.

---

If you are just looking to eek out some additional bytes from each page make sure you are using gzip/deflate compression and THEN try alphabetizing your CSS selector properties and your HTML element's attributes and their values.

Read this for Google's detailed recommendations on the above method.

---

In some dynamic languages with HTML helpers (like asp.net/C#) you can overwrite the html-control's "ClientID" method to be a random string and dynamically link your CSS selectors to your HTML (well, the server-side controls that render HTML). But that would be for another question entirely and is likely not what you are looking to get into. It would also become a maintenance nightmare.

---

Answer 4

Take a look at this: minifycss

As for obfuscation I am not sure that this is such a good idea. The css classes can be manipulated anywhere. The minute you change the css you will lose the link to the classes/ids etc...

Answer 5

HTML Muncher is a python tool that tries to rename IDs and CSS class names across HTML, javascript and CSS files. You can use it as a first step in your optimization process, before passing the files to other tools such as Google Closure Compiler or YUI CSS Compressor.

Answer 6

The YUI Compressor minifies CSS, but I'm not sure how big a win it might be over simple gzip compression. If you have that much CSS, it might be a warning sign of bigger problems.