Hacker News Reader

Comment by huula | Hacker News Reader

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, which can even save more bytes, but given web apps becoming becoming so dynamic right now, that would be hard or really awkward for developer to work with too.

View on HN

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?

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

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.

The Closure Compiler is open source and can do this.

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

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

Oh, is that why I see websites like Facebook and Google using ids like .u-123-gz instead of something like .search-bar?

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

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/RE... but has counterparts in Closure Compiler, and Templates; for JS and HTML, respectively.

Reply on news.ycombinator.com