Before deployment, is there tool to compress HTML class attribute and CSS selectors?

Question

In current project, I was asked for compressing the HTML class attribute and corresponding CSS selectors before deployment. For example, the code on production is:

<div class="foo">
  <div id="bar"></div>
</div>

.foo {/*Style goes here*/}
#bar {/*Style goes here*/}

On deployment, I want the HTML class and corresponding CSS selectors to be substituted:

<div class="a">
  <div id="b"></div>
</div>

.a {/*Style goes here*/}
#b {/*Style goes here*/}

What's the available tools there to archive this compression?

Answer 1

If you really want to rename class names (keeping in mind what Madmartigan said) Google Closure Stylesheets does that. It's an overkill, and YUI Compressor or any other minification + gzipping tool should give you enough performance boost, but it can do it. You'll have to use other Closure tools to make appropriate changes to your .js files and html templates.

Answer 2

There is also a project called "rename-css-selectors" if you handle the code with node:

https://www.npmjs.com/package/rename-css-selectors

There are plugins for nearly every build tool (webpack, parcel, gulp, ...):

https://github.com/JPeer264/node-rcs-core#plugins

This will minify all CSS selectors in HTML, JS and CSS files (actually any file you want). I saved 20ish% of the CSS filesize at the end.

Answer 3

This is amazingly short-sighted.

• Step 1: Turn on GZip or Zlib compression in web server
• Step 2: All text gets compressed, often by 70% or more
• Step 3: There is no step 3.
• Step 4: PROFIT

Answer 4

There's nothing wrong with minification with gzipping, even before modern browsers introduced source maps, minification was a best practice because you can still get some significant savings even when used in conjunction with gzipping. We put up with worse readability on production because the performance improvement was worth it. Now with source maps, we can have our cake and eat it too. Here's a good article demonstrating the effects of combining minification with gzip on html pages for large sites: http://madskristensen.net/post/effects-of-gzipping-vs-minifying-html-files

The difference in savings you get varies very greatly depending on the glyph distribution of the code being minified, so results will vary depending on the minification strategy and the language being minified, and even just depending on coding style. In the average case the savings are still significant.

Minification handles more than just condensing glyphs, it can also restructure the code to remove unneeded characters while achieving the same effect, something that gzipping can't do.

Now, to get back to your specific question, in your case, you want to minify class glyphs. This is harder to do for several reasons. The scoping of those glyphs are between several files, as opposed to it being possible to scope them to local parts of one file. When minifying javascript, global scope variables do not get replaced by default because they may be needed in another script, but with CSS, you don't know what classes are local and which may be defined in another file. To make matters worse, you also need to sync the class replacement to javascript as well, as it's very common to find DOM elements in code via classes. It would be impossible to sync this, as classes may be constructed dynamically in javascript, and even without that issue, it would be a huge ordeal. You can only sync the glyph replacement in javascript if you change your coding style to make sure you explicitly identify where css class strings are being used: https://code.google.com/p/closure-stylesheets/#Renaming

Luckily, glyph replacement is the thing that minification does that gzipping also does very very well, so the size savings from that particular minification strategy is much much less than the other strategies which remove glyphs entirely.

Answer 5

There is also gulp-selectors.

Install it:

npm install gulp gulp-selectors

Now a quick-and-dirty node script:

var gulp = require('gulp');
var gs = require('gulp-selectors');
gulp
  .src(['*.html', '*.css'])
  .pipe(gs.run({}, '{ids: "*"}'))
  .pipe(gulp.dest('.'))'

The second argument to gs.run() is in order for it to leave IDs as-is, see also its website: https://www.npmjs.com/package/gulp-selectors

Answer 6

There is plugin https://github.com/vreshch/optimize-css-classnames-plugin Work as Webpack Loader. That might work in most of cases

Answer 7

For css there is YUI compressor. It will remove unnecessary white-space, and convert your properties to shorthand if you don't already use it. As for html I don't know any but remember that trimming white space in html is not always safe.