this post was submitted on 30 Jun 2025
418 points (97.9% liked)

Programmer Humor

24670 readers
299 users here now

Welcome to Programmer Humor!

This is a place where you can post jokes, memes, humor, etc. related to programming!

For sharing awful code theres also Programming Horror.

Rules

founded 2 years ago
MODERATORS
you are viewing a single comment's thread
view the rest of the comments
[–] Blackmist@feddit.uk 24 points 2 days ago (2 children)

Which CSS framework is it that puts this shit everywhere?

That one can die in a fire.

[–] ThunderComplex@lemmy.today 19 points 2 days ago (1 children)

fun fact: This isn’t any one specific CSS framework's doing but rather part of how JS UI libraries handle scoped CSS. When you have for example two components that have similar CSS, like one component sets button to color green, another component sets button to blue, then the compiler does this kinda thing because "real" CSS doesn’t support scoping.

So in the above example you'd get button class abcd and button class bcde.

[–] FooBarrington@lemmy.world 3 points 2 days ago* (last edited 2 days ago)

How *some JS UI libraries handle scoped CSS. Vue for example uses data- attributes instead.

[–] expr@programming.dev 9 points 2 days ago (2 children)

I'm honestly not sure, but I'm fairly certain it's intentional obfuscation done for the production build. Why they think it's so important to hide class names, I'll never know.

[–] yumyampie@lemmynsfw.com 5 points 2 days ago

It is not intentional. The tooling needs to generate a short unique id to prevent css name clashing.

During development 2 developers can write the same css class name in two seperate places:

  • developer A: .container { padding: 8px } at dashboard
  • developer B: .container { padding: 32px } at sidebar

Without this tooling developer need to find ways to prevent name clashing:

  • .dashboard__container
  • .sidebar__container

and they need to do this for every class name.

with this tool, developer don't have to worry about this ever, continue using .container and it get generated into:

  • .aP2be7
  • .7aFrJp
[–] kautau@lemmy.world 6 points 2 days ago

To fight ad blockers