[gkoberger]

This isn't something a minifier could do without also modifying HTML and JS, and since a lot of JS automatically generates CSS names (something like $(`.list-${i}`)), this would be nearly impossible.

The programmer could shorten it when writing, but is the extra half a milisecond worth having to work with x, y and z as classes rather than more explicit classes?

[ht85]

Maybe I'm misunderstanding your example, are you trying to emulate `.nth-child(x)` with classes like `.list-1`, `.list-2`?

If that's the case, using CSS Modules, you can do in CSS:

    .list-1 { ... }
    .list-2 { ... }

requiring it will yield a map like this:

    { 'list-1': 'JSNF4S12', 'list-2': 'IE945JSN' }

which you can use this way:

    const styles = require('file.css');
    $('.' + styles[`list-${i}`])
    // effectively $('.JSNF4S12')

[catshirt]

> This isn't something a minifier could do without also modifying HTML and JS, and since a lot of JS automatically generates CSS names (something like $(`.list-${i}`)), this would be nearly impossible.

the other option is what CSS modules does. your scripts essentially "require" classnames from your stylesheets so as classnames in your stylesheet are minified so are their js references.

[sly010]

While I am not aware of any open source framework doing this, as long as the programmer holds itself to a few basic rules, this should be possible. If all html/js/css is generated by a template language, you keep the css classes easily parsable and you avoid using dynamic classnames in js (data properties are better for that anyway), you can just replace all classes with random ids.

In fact this is how gettext() works.

[jkaptur]

The Closure Compiler is open source and can do this.

[sly010]

Nice! I didn't know the closure compiler toolkit handles css/html templates too. That explains why googles classnames are mangled.