Menu
I am looking for a tool to optimize my website's complete 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.
255
You can use either css-loader or postcss-modules to do that, for example. Basically, by using CSS Modules, you can import your CSS and treat it as a JSON. So, if you write . long-class-name { } you'll have something like this { 'long-class-name': '<<interpolated name>>' } .
To specify multiple classes, separate the class names with a space, e.g. <span class="left important">. This allows you to combine several CSS classes for one HTML element.
To select elements with a specific class, write a period (.) character, followed by the name of the class. You can also specify that only specific HTML elements should be affected by a class. To do this, start with the element name, then write the period (.)
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 command 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.
173
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
