Live data from Hacker News

Tailwind: A Utility-First CSS Framework

tailwindcss.com

21–30 of 106 posts

Re: Tailwind: A Utility-First CSS Framework

#21
post #11

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.

I highly recommend you read: https://adamwathan.me/css-utility-classes-and-separation-of-...

Re: Tailwind: A Utility-First CSS Framework

#22
post #11

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.

I see this argument as similar to the "what if I want to switch my framework later" or "what if I want to change my database later". I think it's a nice idea, but I'm not sure when you would ever redesign everything _without_ touching the HTML.

Re: Tailwind: A Utility-First CSS Framework

#23
post #11

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.

How many times you do that in real project? Or have you ever done that in your career? And if a project needs substantial redesign it is usually acompanied by the functionality change, which means you need defferent html/components too, so you still can`t just swap css files.

Re: Tailwind: A Utility-First CSS Framework

#26
post #19

Earlier quoted context omitted.

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?

Overrides are special cases. Usually you start with one, but before you know the CSS file has bloated to thousands of lines with hundreds of overrides depending on context. With enough of them you can't comprehend the CSS anymore, which means you can't change any existing classes, and so the CSS becomes write-only.

Adam Morse, who wrote Tachyons a highly influential Functional CSS library, has written about this nicely with concrete data: http://mrmrs.github.io/writing/2016/03/24/scalable-css/

Re: Tailwind: A Utility-First CSS Framework

#28

Author 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/C…

> "holy hell this is the worst thing I've ever seen"

This is so true. All the classes in HTML source look so ugly and verbose when you first see it. At first I dismissed the framework and wondered how someone could think this was a good idea.

I kept seeing it pop up, and the comments were always positive, so I put in a little more effort into understanding how it works. Eventually I decided to try it, and within 5 minutes I was making stuff that actually looked nice. I used it to create a really minimal company website, that looks totally custom, and is really lightweight.

Thanks for sharing it, I really enjoy using it!

Re: Tailwind: A Utility-First CSS Framework

#29
post #12

Earlier 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…

So what happens when your design changes and suddenly all your white buttons need to be off-grey? You change the class on 700 components?

Re: Tailwind: A Utility-First CSS Framework

#30
post #12

Earlier quoted context omitted.

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…

So what happens when your design changes and suddenly all your white buttons need to be off-grey? You change the class on 700 components?

In my experience design revamps of this magnitude has always needed fresh markup, CSS, Javascript - aka an entirely new front-end. But in case it is just the color of all buttons, then you'd change them in the components. 700 components is quite a stretch - for example there are at most 50 components in Morning Star's design system - http://designsystem.morningstar.com/.

But let's say there are 700 components, what's the alternative if we were using BEM? You'd have to change all the 700 CSS classes, breaking things everywhere thanks to cascades, inheritance, multiple selectors, and specificity. With Functional CSS, all you have to do is go to the markup, and change "bg-white" to "bg-offgrey", and nothing breaks.

Post reply on HN