I wonder if any colorblind people completely didn't understand this meme
Programmer Humor
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
- Keep content in english
- No advertisements
- Posts must be related to programming or programmer topics
They said that You either hate or love tailwind, and when I first used tailwind I assumed it was just a joke, 'why would they hate this? It's simple to use, remember, build, and it even removes unnecessary CSS that I forget to do...'
Apparently it isn't as simple as that.
I guess some people write code, and some people also read and maintain it.
Seems like a lot of supportive commenters didn't try CSS-IN-JS like @emotion/styled, stitches, styled-components. Where are you guys? Why learning alternative names for CSS rules considered to be better, than just using those good ol' "let you do everything what you want"s.
Tailwind is sooo great, made me extremely productive when scaffolding layouts and managing my palettes.
I really love it :)
I've used raw CSS for the last 2 years at work and it's not like it's magically better or my productivity is higher or that it is simpler to read and understand.
Use the tool that works for you, tailwind is fine.
Which CSS framework is it that puts this shit everywhere?
That one can die in a fire.
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.
How *some JS UI libraries handle scoped CSS. Vue for example uses data-
attributes instead.
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.
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
To fight ad blockers
In my personal projects, I don’t use anything. I wrote a set of utilities and functions in SCSS years ago that let me easily create reusable variables and classes that already do what TW does, but with less bloat and overhead. I get project-specific spacing, colors, font classes, everything.
I also highly recommend picking up Andy Bell’s Complete CSS course.