1

I notice that many web sites use css files where the class names are minimized to produce the smallest length. While I am aware of tools that will minimize the css file by removing spaces and line feeds, it isn't clear to me how class names get renamed. I would like to use friendly names for development but have optimized names for release versions of my app.

Normally when I create a css class name I name it to something that is easy to understand. For example:

.errorMessage {
  color: #ff0000;
}

and in my html I would have this:

<span class="errorMessage"></span>

But when optimized I would like to see:

.em {
  color: #ff0000;
}

<span class="em"></span>

But this requires having to change the class name in the html which clearly is unacceptable if done manually. I'm guessing that tools may exist that do this renaming or is this done through some other means?

Johann
  • 27,536
  • 39
  • 165
  • 279
  • I have never seen minified class names. It's only for JS where you can properly rename variables. In CSS minification you do not change class names, because sometimes it's dynamic classes. One option is to have CSS/HTML/Etc. pre-processor where you have all class names mapped to it's minified version – Justinas May 03 '19 at 07:09
  • Are you saying that you would use a tool that maps expanded names to minified names? Most of Google's web sites use minified class names. It isn't clear how they are doing it. – Johann May 03 '19 at 07:13
  • Read this [Reducing CSS bundle size 70% by cutting the class names and using scope isolation](https://medium.freecodecamp.org/reducing-css-bundle-size-70-by-cutting-the-class-names-and-using-scope-isolation-625440de600b) on freeCodeCamp. You'll need webpack, babel-plugin-react-css-modules and css-loader or Google Closure Stylesheets. You can also read [this question](https://stackoverflow.com/questions/8067546/before-deployment-is-there-tool-to-compress-html-class-attribute-and-css-select) since yours is pretty much a duplicate of it and check out its answers. – Jake May 03 '19 at 07:17
  • 1
    Possible duplicate of [Before deployment, is there tool to compress HTML class attribute and CSS selectors?](https://stackoverflow.com/questions/8067546/before-deployment-is-there-tool-to-compress-html-class-attribute-and-css-select) – Jake May 03 '19 at 07:18

0 Answers0