It is convenient but you are not separating markup and presentation. I think the whole point of css is to swap stylesheets and get a different presentation, like demostrated by http://www.csszengarden.com/ BEM/OOCSS lets you do this.
Tailwind: A Utility-First CSS Framework
11–20 of 106 posts
Re: Tailwind: A Utility-First CSS Framework
#12I personally have an issue with this "Utility/Functional" CSS pattern. To me I still think that the good old "HTML describe how the content is organized, CSS describe how this content looks like" is the way to go. In the end it's how CSS and HTML were designed at first. But when I see that I'm sorry but it just doesn't feels right to me.
Yes, the problem is that this library just replaced typing with without realizing that the first is considered a bad practice for a reason and that the second is equivalent.
Isn't that basically the same thing as inline styles?
Not quite, for a few reasons:
Inline styles don't respect media queries, which basically rules out responsive design
Inline styles aren't limited to pre-defined options, meaning you can still end up with 90 different shades of blue)
Inline styles cause specificity issues, since they trump separate stylesheets.
Inline styles don't support print-specific styles.
Inline styles can't address pseudo-elements (such as ::before and ::after)
Inline styles can't apply to multiple elements. Utility classes can define .bg-blue once and have it apply to many things, which leads to shorter markup and quicker rendering speed.
Inline styles are a pain to type. Compare class="f-sm bg-blue" to style="font-size: 10px; background-color: #0000ff;".
Utility classes fix all of these things.
Re: Tailwind: A Utility-First CSS Framework
#13I DEFINITELY recommend trying this out before you decide utility CSS isn't for you.
The practical dev workflow of using tailwind is a breath of fresh air.
Coming back to old projects with bespoke CSS is SO PAINFUL to edit/change compared to something built in Tailwind.
You absolutely also have the power to make css components/abstractions as well.
Re: Tailwind: A Utility-First CSS Framework
#14I personally have an issue with this "Utility/Functional" CSS pattern. To me I still think that the good old "HTML describe how the content is organized, CSS describe how this content looks like" is the way to go. In the end it's how CSS and HTML were designed at first. But when I see that I'm sorry but it just doesn't feels right to me.
Author of Tailwind here! If you have the time, I wrote a big article about this a while ago and would be curious to know what you think:
https://adamwathan.me/css-utility-classes-and-separation-of-...
Re: Tailwind: A Utility-First CSS Framework
#15Author of Tailwind here! If you haven't worked with a library like this before, I promise your gut reaction will be "holy hell this is the worst thing I've ever seen" (it was my reaction too!)
You really do have to try it to shake that impression.
If you need a bit more convincing before you're willing to try it, I wrote an in-depth article a while ago that documents my journey from a "semantic classes"-loving HTML/CSS purist to a utility-loving heathen:
https://adamwathan.me/css-utility-classes-and-separation-of-...
If you want to watch it in action, here's a screencast where I rebuild the Netlify UI in an hour and a half without writing any custom CSS:
https://www.youtube.com/watch?v=_JhTaENzfZQ
...and if you want "social proof", here's an interview I did with Diana Mounter who leads the design systems team at GitHub about how moving to a utility-based approach has made things infinitely more maintainable for them, and given their developers a lot more confidence:
http://www.fullstackradio.com/75
If you have any questions I'll be checking the comments, thanks!
Re: Tailwind: A Utility-First CSS Framework
#16Earlier quoted context omitted.
Yes, the problem is that this library just replaced typing with without realizing that the first is considered a bad practice for a reason and that the second is equivalent.
Isn't that basically the same thing as inline styles? Not quite, for a few reasons: Inline styles don't respect media queries, which basically rules out responsive design Inline styles aren't limited to pre-defined options, meaning you can still end up with 90 different shades of blue) Inline styles cause specificity issues, since they trump separate stylesheets. Inline styles don't support print-specific styles. Inl…
Well summarized!
Uitility/Functional CSS > Inline Styles
Re: Tailwind: A Utility-First CSS Framework
#17People please don't judge without giving it a try. Just signed up to write that Tailwind truly changed the way I work. Centralized configuration for styles, colors etc.
Tailwind is the only CSS framework I use since I discovered it and I'm gradually converting my/company projects to use it.
Re: Tailwind: A Utility-First CSS Framework
#18I've been using Tailwind for about a year, and it has really put the joy back into using CSS for me. I know that's crazy to say, but I used to always have so much trouble figuring out what to name things and popping back and forth between HTML and CSS. It was super frustrating, and now I can just flyyyy while building out frontend.
Re: Tailwind: A Utility-First CSS Framework
#19I personally have an issue with this "Utility/Functional" CSS pattern. To me I still think that the good old "HTML describe how the content is organized, CSS describe how this content looks like" is the way to go. In the end it's how CSS and HTML were designed at first. But when I see that I'm sorry but it just doesn't feels right to me.
Author of Tailwind here! If you have the time, I wrote a big article about this a while ago and would be curious to know what you think: https://adamwathan.me/css-utility-classes-and-separation-of-...
In the post you mention extending the first class, author-bio, to the article class. When you introduced the idea of the media-card wouldn't it make sense to have both the author-bio and article classes extend from it, maintaining the semantic naming but also making it easy to override or change some style for one in particular?
Re: Tailwind: A Utility-First CSS Framework
#20Wow, the letter spacing and intuitive responsive design is very impressive. While I can't quite yet abandon bootstrap, this looks like a great alternative.