91–100 of 185 posts
And for example in React to build a component with conditional styling I use classNames and use props that correspond to classes.
Earlier quoted context omitted.
If this article didn't make it click for you, that's understandable. It took me a long time of hearing about this & thinking it was stupid before it made sense. When that happens to me, it's usually a sign of something good. The author of Tailwind suggested I read his best effort at explaining why this makes sense.: https://adamwathan.me/css-utility-classes-and-separation-of-... Towards the end of the article it star…
Easier just to quote the reason he gives: “With inline styles, there are no constraints on what values you choose... Utilities force you to choose... You can't just pick any value want; you have to choose from a curated list. Instead of 380 text colors, you end up with 10 or 12.”
It's 2018, does CSS supported by modern browsers still lack the basic building blocks of reuse? Why am I being asked to choose between class="resources" (and having to know how to center a div in that resources class) and class="t:center t:wide-margins t:light-bg" (which is basically reintroducing all the harm of style tags). Why can't I, in 2018 and with vanilla CSS, say: .resources { @include .centered @include .wi…
Earlier quoted context omitted.
This can easily be accomplished with SASS and a methodology like BEM. And it makes the markup a lot easier to read.
If you prefer that great, which is why I said that I don't think it makes a huge difference one way or another. .i-dont__find-bem--very-readable.
I use Bulma (discussed at the end) for all my projects. It's very easy and quick to get started with, but I found myself diverging from this style when I was starting to add new CSS of my own, to get the pages to look exactly how I wanted them. And due to the lack of tooling, it's hard to refactor CSS (removing duplicate code, etc.) so I'm not sure how scalable it is to adhere to what the OP says for a long time.
I never tried Tailwind, I landed to Bulma after using Bootstrap, and then Tachyons, for many years, and I really enjoy it. I find myself maintaining an helper.scss file with basic classes that bulma does not support out of the box, but other than that, it definitely saves me time and, overall, improves the outcomes.
Last time I migrated a project from Tachyons to Tailwind, it was quick and painless.
Earlier quoted context omitted.
This can easily be accomplished with SASS and a methodology like BEM. And it makes the markup a lot easier to read.
after doing a project with tailwind I have completely abandoned the idea of BEM. while it was nice having clean classes, having the styles directly in the html is way easier to reason about.
Earlier quoted context omitted.
If you prefer that great, which is why I said that I don't think it makes a huge difference one way or another. .i-dont__find-bem--very-readable.
Sass makes it a lot nicer to write BEM notation. The long class names used to bother me too, but it is actually much nicer than not knowing where a class came from. Is `.right-button` a global button style, or unique to this component?
If you're into knowing where your class came from, it seems tailwind would be even better for you because now you have access directly to your styles right there in your markup. Skip the class step altogether!
I plan to use tailwind in all future green field projects!
Enforces style, kills duplication, speeds up development. Ahh the benefits are huge!
Earlier quoted context omitted.
Could you suggest how it's bloating the markup and how it'll bite you in the long run? I understand that maybe adding a bunch of classes for every element will increase the overall size of the page but if it's served with gzip compression doesn't it actually (maybe only technically) work better to have repetitive classes everywhere instead of unique class names?
Adding some classes is alright. Things like "row", "column-6" are tolerated evils. Look at the button from his article: Buy for $10 That's way too granular.
On this page it documents how you can create component classes https://tailwindcss.com/docs/extracting-components/
Button
.btn-blue {
@apply bg-blue text-white font-bold py-2 px-4 rounded;
}
.btn-blue:hover {
@apply bg-blue-dark;
}