Minifying and Obsfucating CSS similar to Javascript [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.

Closed 6 years ago.

Improve this 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(开发者_如何学JAVAtesting+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?

---

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.

---

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.

---

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.

---

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...

---

If you use Ruby, here is a Ruby CSS Minifier that I use to good effect. Given my already-terse style, it gives me about 15% reduction in my file sizes.

For example, on one project the aggregate of 5 files at 32.3kiB becomes 1 file of 26.4kiB (18%). On another project, 2 files of 21.6kiB become 1 file of 19.0kiB (12%).

---

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.

---

---

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.

---

I have developed tool for Obfuscating CSS. It's target is not to make stylesheets load faster or whatever, but to make your "reusable" work safe from stealing. It has several methods how to make a hell of getting an original CSS source (But it's still in development and better methods will be used). I would reccomend it to HTML/CSS templates sellers, who provide live demos and are worried of thefts, and also for coders - freelancers, who wants to present their work to (untrusty) customers. You can try it: http://cssobfuscator.com