3 ms·

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-${

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 10y ago
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')
sly010 10y ago
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 10y ago
  The Closure Compiler is open source and can do this.
  - sly010 10y ago
    Nice! I didn't know the closure compiler toolkit handles css/html templates too. That explains why googles classnames are mangled.
catshirt 10y ago
> 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.

ht85 10y ago

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')

sly010 10y ago

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 10y ago
The Closure Compiler is open source and can do this.
- sly010 10y ago
  Nice! I didn't know the closure compiler toolkit handles css/html templates too. That explains why googles classnames are mangled.

catshirt 10y ago

> 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.