Please considering a more human readable format for generated css classes.

The problem

Emotion produces class names like this: class="css-jdkslf-Item"

While the Item trailing the end is useful because it helps identify the name of the Component it was attached to, it also is harder to read at the end.

Proposed solution

It would be better if the class name was something like class="Item-css-kfjdslf" because that makes it easier to scan.

Alternative solutions

Even better would be if you could get rid of the “css-fdsafdjk” entirely. I am guessing it’s there for namespacing css purposes but I think there’s got to be a more visually elegant solution. Something along BEM or these lines maybe? https://zellwk.com/blog/css-architecture-2/

Additional context I’m just using emotion in a framework that uses it as a dependency. So I admittedly don’t know the ends and outs of it.

[nsaunders]

If you want meaningful class names, you might be interested in a project of mine: https://inline.style/

[jcklpe]

Aren’t source maps there to help you figure out where styles come from? I never need to read the generated class names.

That’s fair. The framework I’m using that uses Emotion has not had support for source maps though there is a pull request currently to fix that so maybe this will be a pretty obvious moot point.