5 ms·

Transforming .a-really-long-class-name-or-id into something shorter, like .x would save a lot more bytes. Another thing is splicing unecessary properties, whic

• saagarjha 10y ago
  Oh, is that why I see websites like Facebook and Google using ids like .u-123-gz instead of something like .search-bar?
  • ht85 10y ago
    That's only a secondary reason, the main reason for this is to avoid having to deal with CSS' "everything is global" flaw. CSS Modules [1] and other tools allow you to require CSS like you would with any other dependency, and replace named classes by unique hashes at build time. This prevents your CSS from leaking to elements that do not explicitly require it. [1] https://github.com/css-modules/css-modules https://github.com/css-modules/css-modules
• gkoberger 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 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.
• aualin 10y ago
  Google's Closure tools have been able to do this for several years. It's mainly documented at https://github.com/google/closure-stylesheets/blob/master/README.md#renaming https://github.com/google/closure-stylesheets/blob/master/RE... but has counterparts in Closure Compiler, and Templates; for JS and HTML, respectively.