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

281–290 of 435 posts

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

#281

Post by danaw »

The_President wrote: post #247
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…

Proclaiming professional advice on the internet should compel you to bother using proper caps and punctuation. To your point - you are addressing the symptoms of bad understanding of CSS and it's relationship to the DOM. While tailwinds is a useful tool, it's not particularly special.

could you read what i wrote? if capitalizing words make me unprofessional, so be it :shrug:

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

#282

Post by bobthepanda »

christophilus wrote: post #259
alwillis wrote: post #135

Earlier quoted context omitted.

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

With CSS names are global. You have to be careful not to accidentally create a class that conflicts with another one used elsewhere in a different context. You have to worry about whether modifying your class will have downstream effects on elements you weren’t intending to impact. It’s a giant pain. I’ve done it by hand for around 20 years before switching to Tailwind. Can vanilla CSS be used for a complex app? Yes.…

Modules make the global thing less of a concern these days.

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

#283

Post by extra88 »

zero_shift wrote: post #273
extra88 wrote: post #203

Earlier quoted context omitted.

I'm not familiar with that old tale about Zeldman. It's true that assistive technologies don't know about CSS class names but CSS absolutely can affect a non-sighted screen reader user's experience. I don't use Tailwind so I don't know if it makes it easier or harder to do the right thing when needing to hide something from everyone or only visually hiding something. Because it's CSS, it can't take care of only hidin…

The structure of your CSS, and the structure of your divs, do not affect AT experience. This is misinformation. As mentioned below: A itself is treated as a generic, transparent box. It doesn't get keyboard focus, and it isn't added to the screen reader's elements list (like headings, links, or landmarks).

Sure. I don't know where you're claiming that misinformation is coming from, it doesn't have anything to do with what I wrote. I was referring to CSS properties that affect the accessibility tree.

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

#284

Post by bryanhogan »

aejm wrote: post #32
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…

Using a JavaScript framework kind of defeats the whole purpose doesn’t it?

Why do you think so?

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

#285

Post by brokegrammer »

Two great things about Tailwind:

- AI already have data about its classes in their training data - No conflicting styles

This means that AI doesn't need to reference any existing stylesheets when generating new styles, which is great for context management.

With custom CSS, you'll have AI read existing stylesheets because otherwise its going to write conflicting styles or rewrite stuff you already have. This can be a problem if you have large stylesheets that take too much space in AI memory.

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

#286

Post by bryanhogan »

floydnoel wrote: post #184
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

Well Tailwind CSS is a CSS framework, and I'm writing CSS.

What Tailwind does is go fully into inline styles though. But I don't think that's an efficient approach, you also break a few other Clean Code principles along the way.

I do have some classes I sometimes apply inline, which are defined in the util.css, but the majority of styling is not done this way.

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

#288

Post by 1shooner »

bobthepanda wrote: post #282
christophilus wrote: post #259

Earlier quoted context omitted.

With CSS names are global. You have to be careful not to accidentally create a class that conflicts with another one used elsewhere in a different context. You have to worry about whether modifying your class will have downstream effects on elements you weren’t intending to impact. It’s a giant pain. I’ve done it by hand for around 20 years before switching to Tailwind. Can vanilla CSS be used for a complex app? Yes.…

Modules make the global thing less of a concern these days.

This is (imo) the most valid argument for Tailwind: the UI semantics of "hero" "card" etc aren't put in CSS, they're put in the module. Modules are typically designed for this encapsulation, and CSS was not.

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

#289

Post by amazingamazing »

danaw wrote: post #265
alwillis wrote: post #135

Earlier quoted context omitted.

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

> Sure, it's easy to overthink things but most of the time, it's not that complex. then you sir are the one that have not worked on complex projects. i'm currently the lead on a design system for a fortune 100 company with nearly 100 block level components and many other smaller elements. responsive, multi-theme/site support, animations, accessibility, robust interactivity, etc. not even a button or link is simple wh…

I have used tailwind and tachyons and they are fine. I do winder though it seems like you end up being stuck with them. How would you migrate to traditional CSS without effectively rewriting all of your css?

I also wonder if it is necessary still with css modules and the fact web frameworks allow for scoped css per component.

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

#290

Post by wild_egg »

bobthepanda wrote: post #218
alwillis wrote: post #135

Earlier quoted context omitted.

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

To be honest, CSS had the cascade but also had horrible tools for actually managing the cascade for a long time. If CSS had nesting, variables, media queries, the other nice selector queries like :has, and modules out of the gate, we likely would have not needed much of the tooling like tailwind that eventually got built to manage it all with less boilerplate. We built the tools because even when these features rolle…

When you say modules, is that @scope or something else? I can't find any reference to a native thing called modules but this seems to fill the same role.
Post reply on HN