Tailwind is primarily solving is excessive CSS bloat, which is 100% a problem with regular CSS
By moving that bloat to HTML.
Actually BEM solves many problems in a very predictible way. At any point, if you see a class COMPLETELY out of context, something that reads like .hero__content__media--is-video you're pretty sure where is that piece used. Now compare with that mambo-jumbo Tailwind introduce.
You say it's better for enterprise? Sure, what it's easier to document? hero__content__media--is-video or p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4 ? button-primary or px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2?
I'd say Tailwind has the same utility as Pug, HAML and other monstruosities that poped out in the last 20 years. Let's pause for a moment and think how hyped this language was if it wasn't pushed by Wathan & co.
It's fine to just say you don't like Tailwind 😊 Everyone likes different things.
At any point, if you see a class COMPLETELY out of context, something that reads like .hero_content_media--is-video you're pretty sure where is that piece used.
Personally, the thing I don't like about this is that as a new developer on a project, I don't know what .hero__content__media--is-video is going to add when I add the class. And by extension I don't necessarily know everywhere that class is used if I wanted to modify the class in some way.
Every approaches has pros and cons, especially with something like CSS that is so flexible. If BEM works best for you, rock on 🤘🏻 But that doesn't mean you need to say that another approach should never be used.
I'm not sure who Wathan & co is, but it sounds like you're not going to like the framework anytime soon.
For the sake of answering your question, I think that a component called which has all the structure, styles and CSS associated with that component under the same folder is much easier to document than a SCSS file stored completely separately from the HTML itself, because you only need to look in one place to find everything related to that component and you could easily reuse that component in another project just by copying one folder. You could still use BEM for that, but you'd have a larger bundle size than if you used utilities only.
What I suggested in the article is that you'd never see a class completely out of context, because it would be attached to a JavaScript component or named in a variable. That's the context for how the class is used.
I wouldn't say the bloat is moved to the HTML in Tailwind unless you're just using plain HTML, which as I said you probably shouldn't be doing. Even then, GZIP can compress Tailwind classes much smaller than BEM classes due to how similar many of the classes are, often only having one character different between groups such as mb-1, mb-2 etc. So even if you were to copy and paste HTML, which isn't recommended, you'd still end up with a smaller bundle compared to BEM.
By moving that bloat to HTML.
Actually BEM solves many problems in a very predictible way. At any point, if you see a class COMPLETELY out of context, something that reads like
.hero__content__media--is-videoyou're pretty sure where is that piece used. Now compare with that mambo-jumbo Tailwind introduce.You say it's better for enterprise? Sure, what it's easier to document?
hero__content__media--is-videoorp-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4?button-primaryorpx-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2?I'd say Tailwind has the same utility as Pug, HAML and other monstruosities that poped out in the last 20 years. Let's pause for a moment and think how hyped this language was if it wasn't pushed by Wathan & co.
It's fine to just say you don't like Tailwind 😊 Everyone likes different things.
Personally, the thing I don't like about this is that as a new developer on a project, I don't know what
.hero__content__media--is-videois going to add when I add the class. And by extension I don't necessarily know everywhere that class is used if I wanted to modify the class in some way.Every approaches has pros and cons, especially with something like CSS that is so flexible. If BEM works best for you, rock on 🤘🏻 But that doesn't mean you need to say that another approach should never be used.
I'm not sure who Wathan & co is, but it sounds like you're not going to like the framework anytime soon.
For the sake of answering your question, I think that a component called which has all the structure, styles and CSS associated with that component under the same folder is much easier to document than a SCSS file stored completely separately from the HTML itself, because you only need to look in one place to find everything related to that component and you could easily reuse that component in another project just by copying one folder. You could still use BEM for that, but you'd have a larger bundle size than if you used utilities only.
What I suggested in the article is that you'd never see a class completely out of context, because it would be attached to a JavaScript component or named in a variable. That's the context for how the class is used.
I wouldn't say the bloat is moved to the HTML in Tailwind unless you're just using plain HTML, which as I said you probably shouldn't be doing. Even then, GZIP can compress Tailwind classes much smaller than BEM classes due to how similar many of the classes are, often only having one character different between groups such as mb-1, mb-2 etc. So even if you were to copy and paste HTML, which isn't recommended, you'd still end up with a smaller bundle compared to BEM.
Actually... not really. The simplistic way archiving works (be it gzip or anything else) is that it:
That's why text documents compress so well.
The size argument is not valid, the gain is marginally in most cases.