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

Moving away from Tailwind, and learning to structure my CSS

jvns.ca

Post reply on HN
Print view View original

181–190 of 435 posts

Re: Moving away from Tailwind, and learning to structure my CSS

#181

Post by meerita »

thiht wrote: post #164
meerita wrote: post #146

The only problem with Tailwind is its syntax. It is anti-CSS. It is confusing and takes time to get used to. Heck, people even wrote cheat sheets. That makes adoption wrong, because people install it just because everyone else uses it or because the current thing brings it in. A long time ago, before Tailwind, I was writing true, pure functional CSS https://www.fcss.club/manifesto , and I never came back to the old O…

> It is confusing and takes time to get used to I don’t believe Tailwind is inherently worse than pure CSS. If Tailwind had existed from day 1 on the web and you had learned it first you probably wouldn’t say this. In fact, if Tailwind had existed first somehow, and someone came up with CSS as we know it as a new revolutionary library, I’m not sure it would have succeeded.

Well, the old-school way was something like this: h1.font.size = 24pt 100%. Tailwind has its own syntax, so you need to learn it first, which adds extra cognitive load. For things like * { color: } in Tailwind, you have multiple options: text-color, stroke-color, etc. With FCSS, you simply have color--[colorname] { color: … }. It’s simpler and avoids unnecessary cognitive load.

Re: Moving away from Tailwind, and learning to structure my CSS

#182

Post by reaperducer »

flossly wrote: post #36
reaperducer wrote: post #26

Earlier quoted context omitted.

if we get our first blind user I will gladly make some admends to make it more usable for them. Not good enough. You have to be accessible before it is needed in order to avoid legal liability. And how do you expect to get a blind user if they already cannot use your product? None of the doctors I build web sites for are currently blind. I know this because I talk to them regularly. But I still build the web sites fo…

You call it lazy. I call it "focus" or avoiding pre-mature optimization. I find the "legal liability" claim hilarious... I do better than 95% of the web: as I said I HAVE some screen reader directives (just did not test it), and labels to make the app more accessible.

I find the "legal liability" claim hilarious

You must have six million dollars laying around. Because that's the penalty Target paid for not having an accessible web site.

Re: Moving away from Tailwind, and learning to structure my CSS

#183

Post by zelphirkalt »

IceDane wrote: post #154
xigoi wrote: post #147

Earlier quoted context omitted.

Global state is bad because it’s mutable. Global styles are not mutable.

No.. that's not the only reason. Global state is bad because it makes it hard to reason about your system. The global state can affect any part of it, or, focusing on the inverse which is probably better applied to global styles, any part of your system can depend on the global state. It's also weird to say "global styles are not mutable" - you're right, they're (generally) not mutable, at runtime. But they are mutab…

With CSS unintended consequences are always problems of scoping things better. If I give semantically meaningful CSS classes to my semantic HTML and scope my rules to apply to their intended place in the pages, then unintended consequences don't happen. If I roll like: "Oh, I want this list to look differently, lets make a global scope ul/ol style!" then I am asking for trouble later on. When I write a CSS rule, I should always be thinking about the scope and whether my rules are truly something universally applicable to that scope.

Re: Moving away from Tailwind, and learning to structure my CSS

#184

Post by floydnoel »

bryanhogan wrote: post #28

I have been writing a "clean" web development guide focusing on writing HTML and CSS that scales well: https://webdev.bryanhogan.com/ Maybe it's useful for people here. I don't use Tailwind or similar for styling, just CSS with modern frameworks like Astro or Svelte. For every project I have the following CSS files: - reset.css - var.css - global.css - util.css Other styling is scoped to that specific component or la…

Sounds like a home made Tailwind of your own

Re: Moving away from Tailwind, and learning to structure my CSS

#185

Post by pverheggen »

timr wrote: post #156
pverheggen wrote: post #136

Earlier quoted context omitted.

There are a bunch of differences between Figma styles and CSS styles that prevent you from creating a 1:1 mapping: typography inheritance, spacing rules, and variant specificity to name a few. Like yes, CSS by itself is extremely powerful, but I see no reason why you should feel beholden to use all of its features simply because they're there. > Sure, sure. except for the inline styles everywhere. And the fact that e…

> Well, instead of repeating inline class names everywhere, you end up with CSS properties repeated everywhere. Not really seeing the difference. Erm... what now? That's so off-the-wall that I can't even wrap my head around your meaning. Are you trying to argue that because, say, a conventional CSS file has "border:1px" in multiple places, this is somehow equivalent to the Tailwind approach of making a "b1p" class th…

Yes, that's exactly what I'm saying. You don't end up needing a semantic class like .widget since you likely already have a Widget component in your codebase. Essentially:

  .widget {
    border: 1px;
  }
  
  ...
  
  const Widget = () => (
    
  );
vs

  const Widget = () => (
    
  );
You keep saying this is an abuse of CSS and that's not how it was meant to be used, but why is that so important?

Re: Moving away from Tailwind, and learning to structure my CSS

#186

Post by ricw »

alwillis wrote: post #135
danaw wrote: post #54

Earlier quoted context omitted.

you're unfairly conflating things and putting the blame for a lack of care or understanding on tailwind vs on the dev themselves. nothing about tailwind forces you to build inaccessible or "div soup" apps can tailwind be used poorly? absolutely. but that's true of any tool i've been writing CSS for ~20 years and am quite capable with it, having used CSS, Less, SASS/SCSS, Stylus, PostCSS etc. the reason i have settled…

> tailwind frees you from having to spend excessive time building abstractions of styles/classes that will invariably change. Abstractions like a hero image, a menu, a headline? Sure, it's easy to overthink things but most of the time, it's not that complex. > placing the styles directly into the markup that is affected by it reduces cognitive load, prevents excessively loose selectors In my opinion, it's the opposit…

I disagree with that conclusion. I see tailwind as a cleaner more succinct version of css that is much easier to manage and add features too.

Sure it’s not as dry, but I’ve been bitten in this regard because css framework and templates are so intransparent, preventing me from simply changing padding or margin.

CSS is too detailed and too verbose. Frameworks like bootstrap are too high level and don’t give enough control. Tailwind hits the sweet spot whilst allowing me to be detailed if I want to. It allows me to just get it done.

Re: Moving away from Tailwind, and learning to structure my CSS

#187

Post by _puk »

reaperducer wrote: post #182
flossly wrote: post #36

Earlier quoted context omitted.

You call it lazy. I call it "focus" or avoiding pre-mature optimization. I find the "legal liability" claim hilarious... I do better than 95% of the web: as I said I HAVE some screen reader directives (just did not test it), and labels to make the app more accessible.

I find the "legal liability" claim hilarious You must have six million dollars laying around. Because that's the penalty Target paid for not having an accessible web site.

In 2008..

That wasn't even a regulatory penalty, but a class action by the National Federation of the blind.

https://en.wikipedia.org/wiki/National_Federation_of_the_Bli...

Re: Moving away from Tailwind, and learning to structure my CSS

#188

Post by hparadiz »

0x3f wrote: post #148
esseph wrote: post #116

Earlier quoted context omitted.

You just told a bunch of potential and current customers that they're not worth the ROI. Pretty sure they'll remember that, and they'll talk about it a lot.

Picking subsets of customers to focus on is a totally standard part of running a startup or company in general, so this is not really news or any kind of threat. You might as well tell me the suburban moms are not going to buy my developer tool because I've personally slighted them with the branding. Why would I care? I made my decisions knowing this. In fact ditching low RoI customers is incredibly common and good s…

This is just admitting that your product is small and unimportant.

Re: Moving away from Tailwind, and learning to structure my CSS

#189

Post by wbadart »

Great writeup!

Lately I've been enjoying Open Props[0]. It's a library of CSS props/ variables that helps structure a design system. I like it because it's CSS-first, so like OP experienced moving off TW, I've learned more CSS, and it works with the browser not against it. It also provides some sane defaults for anyone less interested in fiddling with precise cosmetics.

[0]: https://open-props.style/

Post reply on HN