Live data from Hacker News

Tailwind: style your site without writing any CSS

jvns.ca

151–160 of 185 posts

Re: Tailwind: style your site without writing any CSS

#151
Doesn't this essentially put you back to the bad old days of style attributes? Sure, the "styles" you are using are much more clever and they adapt to screen sizes, etc., but you are still putting the specific style you want an element to have in the element itself and not getting any redirection.

Say you have an entire application with a dozen primary pages, plus several dozen modal windows and other sub-pages. If you want to make a global change, like, "Change all the OK buttons in my entire application to have rounded corners and a gray to red gradient" then you have to go back and make a change to every button you have in the application. The whole idea with changing the CSS was that I defined a semantic CSS (e.g. "OKButton") which I used in all the places that had a common meaning, and then I could change the look of the entire application in one place.

Re: Tailwind: style your site without writing any CSS

#152

Earlier quoted context omitted.

Co-author of Tailwind CSS here. Prior to building Tailwind, I followed more traditional approaches to writing CSS, like BEM. In fact, I remember when BEM first came out, and people hated it too. I've worked on small projects, and very large projects. I recently rebuilt a large web app using Tailwind, and my resulting CSS was TINY. I use Tailwind in conjunction with Purge CSS. The resulting filesize was 8.1kb gzipped…

At scale, the priority is isolation of components. This allows things to be composed, moved, etc. without affecting each other. We accomplish this in our web app (over 500 kloc) by simply giving each component’s top-level element a unique, formulaic, memorable CSS class (which is very easy to do with SASS/SCSS). And each component gets its own CSS (or .scss) file, HTML file, JS file(s), and I18n directory. The app lo…

The problem with isolation of components is that then the stylesheets are no longer cascading -- each component needs to be re-designed to fit within a design framework, and there's no CSS reuse between components is entirely copy-and-paste. Good luck re-styling anything for "dark mode" without having to hand-visit each component's JavaScript and CSS.

Plus, component isolation has really slow polyfills. None of the Google stuff as of late runs on anything other than Chrome for like a year after launch because it's too slow and broken -- everything is being rewritten in Polymer, which relies on browser support for component isolation.

Re: Tailwind: style your site without writing any CSS

#153
post #42

Earlier quoted context omitted.

Bloating your markup with classes is simply a bad habit. It bites you hard in the long run. Even the framework that they are using proposes better alternatives. “ Tailwind encourages a "utility-first" workflow, where new designs are initially implemented using only utility classes to avoid premature abstraction. While we strongly believe you can get a lot further with just utilities than you might initially expect, w…

> It bites you hard in the long run. How so? If what I need is (as the author describes) to occasionally make a quick relatively-usable site, and I want to do some styling on it, and then forget about frontend UX until I need to do another small site 4 months from now, how will this pattern bite me?

How can you achieve reuse (DRY) with this? Every time I have a button, if I want my buttons to be consistent and have a single place to change them, I have to like invoke a button partial that just outputs my with 20 classes on it? It's a lot easier to reuse a CSS class (an abstraction) than a template of a chunk of HTML (an indirection) -- especially across divides of languages/runtimes/client-vs-server if you have any of those.

Re: Tailwind: style your site without writing any CSS

#154
post #152

Earlier quoted context omitted.

At scale, the priority is isolation of components. This allows things to be composed, moved, etc. without affecting each other. We accomplish this in our web app (over 500 kloc) by simply giving each component’s top-level element a unique, formulaic, memorable CSS class (which is very easy to do with SASS/SCSS). And each component gets its own CSS (or .scss) file, HTML file, JS file(s), and I18n directory. The app lo…

The problem with isolation of components is that then the stylesheets are no longer cascading -- each component needs to be re-designed to fit within a design framework, and there's no CSS reuse between components is entirely copy-and-paste. Good luck re-styling anything for "dark mode" without having to hand-visit each component's JavaScript and CSS. Plus, component isolation has really slow polyfills. None of the G…

We're not using any Web Components APIs, thus no slow polyfills are required (see my comment for how we isolate component CSS).

As for eschewing the style cascade, yes, that is happening when we isolate each component's CSS. However, wouldn't using Web Components proper have the same problem? And yes--it would be a very large task to add a dark mode, as you say. Each component would have to be visited. However, when we drop IE11 support, CSS custom properties will make this potentially much easier.

We don't copy-and-paste CSS often (remember we're re-using components and composing them everywhere). If there's enough commonality for CSS copy/paste to be tempting, it's probably time to either revisit how components are being composed (do we need to create a new component, or maybe have these 2 similar components inherit from a base JS class?), or add those styles to a top-level stylesheet and use shared CSS classes.

Re: Tailwind: style your site without writing any CSS

#155

Earlier quoted context omitted.

The benefits absolutely do not outweigh the cons. For starters, your CSS can never compile down to a smaller size than component CSS - ever. Because of the nature of compositional classes the plateau of problems expands out almost infinitely, and the resultant inconsistencies necessitate new overrides, more code, more complexity, more misdirection. What size site do you work on? How often do you have to completely ch…

Co-author of Tailwind CSS here. Prior to building Tailwind, I followed more traditional approaches to writing CSS, like BEM. In fact, I remember when BEM first came out, and people hated it too. I've worked on small projects, and very large projects. I recently rebuilt a large web app using Tailwind, and my resulting CSS was TINY. I use Tailwind in conjunction with Purge CSS. The resulting filesize was 8.1kb gzipped…

> I recently rebuilt a large web app using Tailwind, and my resulting CSS was TINY.

I think Tailwind is quite an interesting approach, but to play Devil's advocate: how much bigger was your HTML? With all these class names, you're basically moving some of the entropy over from the .css to the .html, right?

Re: Tailwind: style your site without writing any CSS

#156
post #127

Earlier quoted context omitted.

I'd love it if you expanded on that last comment - my instinct is that functional CSS is a footgun, but I'm not nearly good enough at CSS to really be able to unpack that into concrete problems it causes.

Sure thing. Due to an NDA, I can’t get into granular detail about the site, but I’m more than happy to expand on the problem. When I started here, I sort of “inherited” a large stylesheet written in the classic BEM/Tachyon style of CSS. I can see why the author chose this method, because at the time the website was small and functional classes seem like a really good thing, as they help you get up and running quickly…

> Now that we build with small, immutable, scoped components, its trivial to drop in a new component (or remove it) from anywhere without affecting anything else.

Any suggestions for further reading on "small, immutable, scoped components" ? I'm half sure I know what you mean and entirely sure I don't understand it well enough to explain it to somebody else.

(thanks for your already expansive reply)

Re: Tailwind: style your site without writing any CSS

#157
post #152

Earlier quoted context omitted.

At scale, the priority is isolation of components. This allows things to be composed, moved, etc. without affecting each other. We accomplish this in our web app (over 500 kloc) by simply giving each component’s top-level element a unique, formulaic, memorable CSS class (which is very easy to do with SASS/SCSS). And each component gets its own CSS (or .scss) file, HTML file, JS file(s), and I18n directory. The app lo…

The problem with isolation of components is that then the stylesheets are no longer cascading -- each component needs to be re-designed to fit within a design framework, and there's no CSS reuse between components is entirely copy-and-paste. Good luck re-styling anything for "dark mode" without having to hand-visit each component's JavaScript and CSS. Plus, component isolation has really slow polyfills. None of the G…

Avoiding the cascade is kind of the point, although I'm sure that sounds antithetical. IMO, the cascade should be treated with an "opt-in" approach, where you have a fine degree of control over what, precisely, is cascading and why.

In general, with component CSS, you will tend to avoid the cascade, except within your component. This is actually where utility classes have some value - if they're scoped very tightly to the parent, and their effects are well-understood - then your single purpose class can add an easy way to do simple updates.

That being said, for my part, and on my own website (doggos.com) we do not use any form of utility classes whatsoever. The entire website depends upon isolation, and through this isolation, I have a degree of control that I've not found in applications that have opted for other methods.

In short, it's worked very well for us.

As for your dark mode example... you should take a look at how Apple made dark mode a reality with their new Mojave update. I think you will be surprised at the level of isolation their interface demands and, although we're no longer talking about the web here, just how easy it was for them to implement...relatively speaking.

In short, I can make a site go dark with components, no problem.

Re: Tailwind: style your site without writing any CSS

#158
> Web design really isn’t my strong suit [...] for probably like 12 years now [...] and am making no efforts to improve

Is this ignorance common among those for whom functional CSS makes sense, or are there any CSS experts who like it? I'm bewildered by the popularity, as I am by several other fashions.

Sometimes I wonder if these choices come from blog-driven development. I used to feel a bit insecure that I didn't go to school for computer science. I tried to make up for that by reading books, many books, cover to cover. Reading a great book cover to cover gives you a coherent understanding of the beginning, middle, and end of a language or tool. Also I read references: the list of core PHP functions, the jQuery API, and the list of CSS attributes. I didn't memorize them. I just tried to understand the gist of each, filed in the back of my mind, enough to prod me to find it in the reference when I needed it. But if you are learning by blog and Stack Overflow, do you ever come to an overall, comfortable understanding of something?

I grant you that it will take some time, but so does learning these frameworks. The frameworks seem to fix one problem while planting three more. And Julia Evans is a technically minded person. She has written about Git and the Linux command line. Which is more complicated, Linux or CSS? I had always thought that HTML and CSS were meant to be softballs, for people who are geeky but maybe not full-fledged programmers. HTML and CSS were the first languages I learned, but my coworker stressed to me that they weren't full-on programming languages.

> It’s 2018! All websites need to be responsive!

I wonder if responsiveness is another cause for this trend. I agree that making pages that shrink and fold for various screens might put some novices over the edge. But looking the simplicity of Julia's website, maybe all she needs is a viewport meta tag.

Another advantage I've had is my lifelong interest in graphic design. Before I knew CSS I knew about color, fonts, white space, etc. So I'm sure that made learning CSS easier for me. But for those who aren't into that, why aren't templates and stylesheets from other people enough? They've already chosen fonts and colors and margins and stuff that looks good together. They give classes for various kinds of pages and sections. Maybe you're somewhere in the middle, where you're not adept enough to write your whole CSS from scratch, but you want more customization than just using a general stylesheet. But why can't you tweak it? If you're smart enough to use Tailwind, aren't you smart enough to fiddle with some attributes in a stylesheet, make the corner rounder, make a font bigger, etc.?

I truly am interested in understanding, if possible. CSS has a few things that are mildly annoying, but just mildly. Nothing would ever make me want to do something like this. Truly I am bewildered!

One more thing: my attention is spread across many complex applications, thousands of lines of code, and I am in charge of the full stack (JavaScript, HTML, CSS, PHP, Apache, SQL). So it's not like I get to spend all my time focused on the front end. Yet my users have told me that my pages look nice. I'm spread thin, but I've never wanted to use anything but stylesheets, no BEM, no SASS, just good, old-fashioned selectors.

Re: Tailwind: style your site without writing any CSS

#159
Lots of comments in here echo the initial gut reaction we all have when first encountering utility class composition.

"What about semantic classnames? Separation of concerns? It looks ugly, is going to be hell to maintain, won't scale.. may as well use inline styles!"

I did a conference talk about my own experience moving from BEM to utility-first CSS, you might find it interesting

https://vimeo.com/294976504

Re: Tailwind: style your site without writing any CSS

#160
post #42

Earlier quoted context omitted.

> It bites you hard in the long run. How so? If what I need is (as the author describes) to occasionally make a quick relatively-usable site, and I want to do some styling on it, and then forget about frontend UX until I need to do another small site 4 months from now, how will this pattern bite me?

How can you achieve reuse (DRY) with this? Every time I have a button, if I want my buttons to be consistent and have a single place to change them, I have to like invoke a button partial that just outputs my with 20 classes on it? It's a lot easier to reuse a CSS class (an abstraction) than a template of a chunk of HTML (an indirection) -- especially across divides of languages/runtimes/client-vs-server if you have…

With Tailwind you use @apply to achieve this goal: https://tailwindcss.com/docs/extracting-components
Post reply on HN