Generating and applying reusable single purpose classes rather than unique id classnames

Is your feature request related to a problem? No, rather an idea.

Describe the solution you’d like So you may have heard about css tachyons, which is basically single purpose utility classes. Now remembering such tachyon names while programming is not what you want to do.

So while implementing my own html rendering library, I started generating such single purpose classes from style object in js. It also supports media queries. (I did not know about CSS-in-JS at the time). My code for generating css and classnames is spaghetti code 😃 So I was thinking what if a jss plugin could be written that did a better job than my code.

Example:

{
    display: 'flex'
}

Becomes:

.d-f{display:flex}

This means that any element that uses flex will simply have the class “d-f”. The size of css becomes minimalistic, while the number of classes per element grows a bit 😉

There are more advanced examples here:

• https://www.npmjs.com/package/render-js
• https://github.com/ComLock/render-js

Perhaps there is some other framework (that I could not find) plugged into react that already does this? It would be nice to not be limited to React and do SSR.

Perhaps even compile time (though thats not to applicable for dynamic components where styling changes depending upon props).

Are you willing to implement it? Yes, but can I 😃

[kof]

I think you are talking about atomic css. I think you could achieve that with a plugin. The question is why? Usually with this model people try to reduce css payload. Also it allows a different caching strategy. At the same time it brings a bunch of problems.

[kof]

I think we can close this issue since it is not really actionable. The idea of rendering to atomic css is not new and if someone finds time I am happy to restart this discussion.