While I understand the idea behind using CSS “correctly”, I have, in my 15 years of professional experience, never ever seen even one project where the hypothetical promises of CSS were actually realized. It ALWAYS ends up with a fuckton of importants, or hunting for ages for the one class fifteen levels of abstraction up that changes your one element, coming up with more and more absurd class names, until they are literally no different from just some random name. Tailwind might seem horrible in a theoretical sense, but in an actually using it sense it’s a heaven sent. I want to change the padding on THIS ONE SINGLE ELEMENT, I change it EXACTLY RIGHT THERE where the element is defined, and i can be absolutely sure that I haven’t accidentally cascaded someone else’s work to death.
#CSS, in practice, is the insane idea of every single element on your website sharing global, mutable state, and thinking that’s in anyway smart.
.btn {
@apply m-2 p-2 bg-blue text-white
}
lol, they’re basically writing a CSS class with CSS rules
Why bother to even use @apply? Just write the damn CSS.
I agree.
Websites that use reasonable or good HTML markup with structure, the correct HTML tags, useful ids and classes are great to work with. But regularly you see websites with generated HTML without any useful identifiers or structure. A generated garbled mess of anonymous, generic components and styling CSS classes.
I’ve worked on content extraction for OpenTermsArchive and write my own injected CSS hacks and browser extensions. Working with good website sources is great. Working with garbled messes is awful.
HTML losing its markup aspect - that you can traverse and select - makes websites inaccessible.
/edit - adding:
The CSS tailwind generates might not be bloated, but repeating the gigantic strings of classes all over your codebase certainly adds to the size of the final HTML output.
The HTML is not just bigger, but bloated and inaccessible. HTML markup with identifiers and classes is readable and understandable. It has structure and labeling. Inlining styling rules bloats it to the point of unreadability. And losing identifiers and classes is a loss of labeling and selectors.
I think the article fails to mention that one of the reasons tools like Tailwind (and methodologies like BEM, etc.) exist in the first place is to facilitate bigger organisation sites.
In my personal experience “plain old CSS” isn’t feasible as the number of mainterners on a site goes up. Once there is multiple teams (possibly even across multiple departments) contributing to a site, the cascading part of CSS means that it is more or less unavoidable that some change from one team unintentionally breaks something for another team - and this being visual things means that it is very hard to catch with automated tests.
After having working in a big organisation for a while, most developers will eventually start wishing for something that would make sure that their CSS only applies to their own components. div tags with inline style attributes suddenly starts to look very attractive - which is what eventually led to something like Tailwind.
