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
21–30 of 106 posts
Re: Tailwind: A Utility-First CSS Framework
#22It 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.
Re: Tailwind: A Utility-First CSS Framework
#23It 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.
Re: Tailwind: A Utility-First CSS Framework
#24Are we missing a [1996] in the title?
Re: Tailwind: A Utility-First CSS Framework
#25Really i don't need the compile-step, just really wanted to get out of the bootstrap canton
Re: Tailwind: A Utility-First CSS Framework
#26Earlier 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?
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
#27Re: Tailwind: A Utility-First CSS Framework
#28Author 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…
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
#29Earlier 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…
Re: Tailwind: A Utility-First CSS Framework
#30Earlier 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?
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.