Geek Answers Handbook

CSS optimization for automatically changing class names

I am looking for a tool to optimize my build on the site. I use SASS as CSS preprocessor and Uglify to create my JavaScript files and some more Grunt related tools. In addition, the markup in this case is a single index.html file, but in other projects it is either in PHP files or in Liquid templates.

I use BEM ( block, element, modifier ) to name my classes, and sometimes, which leads to quite huge classnames like navigation__item__link--home or even longer.

I am looking for a tool that automatically converts final, constructed CSS files in such a way that it changes the names of classes or identifiers to something like .a, .b , but changes every HTML and JavaScript file in the same way, so that the correlated codes do not will be confused.

Of course, I want to save the source files of the project, so I would like the tool to be able to create new files in accordance with these rules and, preferably, be able to use it with Grunt .

+7
optimization javascript html css php
source share
3 answers

It looks like you are looking for a tool called munch . This is a pre-deployment tool that does exactly what you ask for. This is a command line utility that you point to files of the form (html), css and js, and shorten class names and identifiers, while preserving their uniqueness and maintaining referential integrity without changes between all source files. There are also some handy options, such as the ability to output a map file that lists the conversions that it made. The documentation is pretty simple.

FWIW, I am not related to the project.

+4
source share

I would recommend Grunt for this.

Sass and css can be done using the existing grunt-sass plugin , and javascript can use grunt-uuglify .

As long as I'm not sure if there is a plugin that already performs the usual hacking, you can easily write a plugin for this. Grunt plugins are written to node, so it is fairly accessible if you are familiar with javascript.

0
source share

I think there is a simple solution for this. Are you using Sublime text editor? If not, I recommend it. One of the features: "Search and replace multiple files . "
A simple ctrl + shift + F should do the trick. You can also use regular expressions.

-3
source share

More articles:


All Articles