I am looking for a tool to optimize my website's plete build. I am using SASS as a CSS preprocessor and Uglify to create my JavaScript files, and a couple of more tools all tied together with Grunt. Also, the markup is in this case a single index.html file, but in other projects it's in either PHP files or in Liquid templates.

I am using BEM (block, element, modifier) to name my classes and sometimes, that leads to quite huge classnames, such as navigation__item__link--home or even longer.

I am looking for a tool that automatically converts the final, built CSS files in a way that it changes the class or id names to something like .a, .b, but changes every HTML and JavaScript files according to the same method, so that correlated codes won't get messed up.

I want to keep my original project files of course, so I would like the tool to be capable of creating new files according to these rules and preferably, capable of using it with Grunt.

I am looking for a tool to optimize my website's plete build. I am using SASS as a CSS preprocessor and Uglify to create my JavaScript files, and a couple of more tools all tied together with Grunt. Also, the markup is in this case a single index.html file, but in other projects it's in either PHP files or in Liquid templates.

I am using BEM (block, element, modifier) to name my classes and sometimes, that leads to quite huge classnames, such as navigation__item__link--home or even longer.

I am looking for a tool that automatically converts the final, built CSS files in a way that it changes the class or id names to something like .a, .b, but changes every HTML and JavaScript files according to the same method, so that correlated codes won't get messed up.

I want to keep my original project files of course, so I would like the tool to be capable of creating new files according to these rules and preferably, capable of using it with Grunt.

• javascript
• php
• html
• css
• optimization

• why exaclty would you care to use BEM in the first place? in my view, css preprocessors help mitigate the pain of unstructured, intransparent rules definition. if you don't like the style of a convention, drop the convention instead of introducing a workaround to that convention. – Jakob Hohlfeld Commented Apr 10, 2014 at 13:19
• I love every single aspect of the convention and from a development point of view, not only is it optimal, in my point of view it's heaven itself. I am trying to separate development from deployment here and by the way, this sort of optimization can be helpful not only if you use BEM, but anyway, in this case you just win more. – pentzzsolt Commented Apr 10, 2014 at 20:04
• You must have users with a very slow connection or an extreme amount of users to be worried about the length of class names. With a 1000 classes (defined or called) and an average of 20char reduction (which is a lot) we are talking about 2,5kB per user/per session with proper caching. – Hugo Delsing Commented Apr 14, 2014 at 8:25
• We did benchmark the potential advantage in our CSS file by manually overriding the classnames one by one and paring that to the original file, and the results were significant. Compared to the original, minified file, which was 54kb, the new file, also minified of course, was only 36kb, which is a 33% drop only in the CSS. I don't know where your data is ing from, but I would love to see an actual benchmark result. – pentzzsolt Commented Apr 14, 2014 at 8:51
• 1 Well, I believe that any website always benefits from every single byte of drop in file size, of course the cutoff of where it begins to be worth of the work that you put into it depends in every case. In my case, 20kb shouldn't be crucial, but would be worth the extra work. :) – pentzzsolt Commented Apr 14, 2014 at 11:08

2 Answers 2

It sounds like you are looking for a tool called munch. It is a pre-deployment tool that does just what you are asking for. It is a mand line utility that you point at your view (html), css and js files and it will shorten class names and ids while still keeping them unique and keeping referential integrity intact between all of the source files. There are also some handy options, like the ability to output a map file that lists what transformations it made. The documentation is pretty straight-forward.

FWIW, I am not affiliated with the project.

I would remend Grunt for this.

The sass and css can be done with existing grunt-sass plugin and the javascript can use the grunt-uglify plugin.

While I'm not sure if there is a plugin that already does the custom uglification, you could easily write a plugin to do so. Grunt plugins are written in node, so it's pretty approachable if you're familiar with javascript.