Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Tailwind: style your site without writing any CSS

jvns.ca

Post reply on HN
Print view View original

121–130 of 185 posts

Re: Tailwind: style your site without writing any CSS

#121

Post by mkarnicki »

jacamat wrote: post #109
mkarnicki wrote: post #66

Earlier quoted context omitted.

Because you'll have 29 different margins, 67 different left paddings, etc all over the place. Tailwind allows you to create a consistent design system. CSS was supposed to be "write one class, use it everywhere instead of inlining". Usually it ends up with nobody reusing that class and everyone creating their on in the same codebase. There's an article I don't have a link handy, which explained how ridiculously many…

you have that with tailwind too, lol. probably even worse the bigger your app is.

Can you elaborate? I can't agree with you. Tailwind is meant to provide a consistent design system, of which CSS size should never get out of hand (which is the case then using regular CSS). Whenever I use Tailwind, I end up adding maybe 20-30 lines of CSS and I never have to open a CSS (or other sass/less/whatever) ever again. Have you tried Tailwind or you're just assuming what you're saying?

Re: Tailwind: style your site without writing any CSS

#122

Post by Giorgi »

jacamat wrote: post #106

Everytime I see Tailwind/Tachyons/Functional CSS at the top of HN I die a little inside. I've said it before and I'll say it again: if you actually like this kind of CSS, you probably don't work on large websites. And when you do, the reason people hate it so much will become abundantly clear to you. Functional CSS makes for an unscaleable, inconsistent, unmaintainable dumpster fire of styles that is objectively wors…

I have hard time understanding what are you talking about? github and twitter have their own framework, what's bad with that? why would not it scale?

Re: Tailwind: style your site without writing any CSS

#123

Post by thedeepself »

icebraining wrote: post #110
lmm wrote: post #61

Earlier quoted context omitted.

> So if you have a large number of buttons or other elements with the same class you will be repeating yourself over and over. In the HTML, sure. But so what? It gets compressed in transport so there won't be significant overhead there (similar to how remote desktop protocols that send images with compression turn out to be just as efficient as those that tried to send intelligent drawing commands), and the browser h…

What frameworks treat HTML as an output format, and what is the input? When I see samples of React code, all the HTML (in the form of JSX) is still handwritten, just combined dynamically.

Reahl and Nagare in the Python world do:

http://reahl.org and http://naga.re

Re: Tailwind: style your site without writing any CSS

#124

Post by jmhnilbog »

What percentage of software churn is based on developers being reluctant to call out mistakes by other developers on their own teams/in their own companies (while having no problems calling out flaws in internet strangers' code)?

'Curating' what developers are allowed to do has been the focus of the last few jobs I've declined. "The guys at the other office are too dumb to learn (React|Angular|CSS|tech X). Obviously, we need a team to invent something that uses (React|Angular|CSS|tech X) behind the scenes but has a totally different API and no easily searchable documentation or support outside of our company."

Tailwind looks like one of those escaping into the world, when telling your devs to pay attention to a style guide would have been the easier solution.

Technology does not have a glorious track record in solving cultural issues.

Re: Tailwind: style your site without writing any CSS

#125

Post by mrfredward »

mbrock wrote: post #33
Raphmedia wrote: post #31

Sounds to me like the author should simply use SASS + a good autocomplete feature in their IDE. When I write CSS, I use a lot of shortcuts. I simply write "mt5" and then press tab, it then auto completes to "margin-top: 5px;". If I write "tdu"+tab and then it goes "text-decoration: underline;". The IDE also shows me in a drop down all the options that can be used after writing "text-decoration". Changing standards be…

Oh no, laziness! Someone is doing something in an easy and convenient way that somehow doesn't match up with other people's ideals of conceptual purity! :'(

I tend to think laziness is positive when it inspires better architectures. Picture a dev who just sits there drinking his coffee until he finds a way to do something without typing a lot or remembering a lot of small details. Now picture a dev who dives in enthusiastically, writing the same bits of configuration a hundred times with small tweaks. Whose code would you rather maintain?

If an abstraction makes it easier to do what you want to do, it's a useful abstraction.

Re: Tailwind: style your site without writing any CSS

#126

Post by matthiaswh »

dna113 wrote: post #67

Lol here we go again. Why does this get people so riled up? I suspect people who immediately dislike this maybe are not using some type of component-based UI. CSS classes are all about code-reuse. If you have the concept of say a "button" in your UI, and you are copying your button markup every where you use that "button" then it certainly makes sense to have a class for your button markup that encapsulates the style…

It's easy to understand why it gets people "riled up." For 20+ years the entire industry has been pounding the table about why inline styles are so bad. Thousands of articles have been written espousing this idea, and likely hundreds of thousands of hours have been spent devising better alternatives in the form of CSS frameworks.

Whether Tailwind is functionally and pragmatically better than inline styles isn't even important. It looks like inline styles, so the first reaction of almost any experienced designer/developer that looks at it is to make that association and squirm in discomfort at its mere appearance.

Re: Tailwind: style your site without writing any CSS

#127

Post by mst »

jacamat wrote: post #108
shubhamjain wrote: post #74

How would have React adoption looked like if it wasn't backed by a tech giant? React propounds a very controversial idea: to put HTML inside Javascript. Of course, once you get the hang of it, it all makes perfect sense: tight coupling and composability. Tailwind, along the same lines, proposes a contrarian idea and it will only make sense once you start working with it. Here's what I have seen happen frequently: As…

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…

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.

Re: Tailwind: style your site without writing any CSS

#128

Post by peeters »

err4nt wrote: post #105
peeters wrote: post #77

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…

What's wrong with class="centered wide-margins light-bg"? It would do the same as what your .resources class looks like it might do, and it's supported everywhere already.

Nothing when everything's a one-off and you only have one supported theme. But if CSS is your component model (e.g. a card is always just a div but with a special style) then you'll have "centered wide-margins light-bg dropshadow" on every one of those divs, rather than just class="card". Similarly if you want to have two different themes with the same DOM, you can't do so easily.

Re: Tailwind: style your site without writing any CSS

#129

Post by jacamat »

mst wrote: post #127
jacamat wrote: post #108

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…

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.

Over the years, however, the site got more popular, and now the demands of the interface are increasing. At one point, it was perfectly OK to do, say, “container mt-5 mb-5 p-20 text-green” etc. This flexibility allowed the site to grow, and while the CSS did bloat, the impact was seen as negligible for years.

Now the site sees 50-80k+ DAU, and seeing as the business is very established, it makes sense that we would want to add bells and whistles to the UI that wasn’t on the roadmap those years ago, like theming, widgets, or simply making a previously non-responsive page responsive.

In Tachyons, and in Tailwind, the abundance of utility classes means that even the best, most organized authors will create inconsistencies. The original container styles from earlier might look something like “container mt-5 mb-5 p-20” in one place and “container mb-30 mt-30” or “container bg-dark pt-5” in others.

It may seem trivial to just add and remove classes at will, but it isn’t. Removing a margin-bottom from one element inevitably affects the position of another on the same page, and trying to reconcile these inconsistencies _usually_ means an override, because figuring out how to rearrange functional classes without breaking anything else is a time suck.

Removing this style of CSS from the project has been tedious, but necessary. 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. And you avoid the unexpected inconsistencies created using utility classes by, well, avoiding them. As someone that used to love BEM, tachyons, Atomic CSS, etc., the lack of scope, unpredictability and huuuuge bloat created by overrides steers me away from it even for the tiniest of projects.

Re: Tailwind: style your site without writing any CSS

#130

Post by adamwathan »

jacamat wrote: post #106

Everytime I see Tailwind/Tachyons/Functional CSS at the top of HN I die a little inside. I've said it before and I'll say it again: if you actually like this kind of CSS, you probably don't work on large websites. And when you do, the reason people hate it so much will become abundantly clear to you. Functional CSS makes for an unscaleable, inconsistent, unmaintainable dumpster fire of styles that is objectively wors…

GitHub has been switching to functional CSS over the last couple of years: https://primer.style/

I interviewed Diana Mounter who leads their design systems team about this a while back: http://www.fullstackradio.com/75

Post reply on HN