3 ms·

I embrace the mess of tailwind-cluttered markup to eliminate context switching and save up some cognitive load.

hasanhaja 1y ago
How's your experience maintaining styles written in this manner? My experience has been increased cognitive load when I come back to tailwind styles after a long time, when compared to dealing with handwritten CSS selectors and classes
- switz 1y ago
  To the contrary, far less cognitive load. I don’t have to internalize a class name and where it lives in a style sheet and then context switch between the two.
  - skydhash 1y ago
    No one does. You either use the web inspector if you need a global view or do a grep to find where the class is being defined. Tailwind is only useful if you have some kind of templating system where you can define components. And in this case, it’s very easy to scope your css.
- vehemenz 1y ago
  I don't see how that's possible. My experience has been the exact opposite. When you say "handwritten CSS selectors and classes," what you really mean is learning a unique codebase with high levels of abstraction that map on to the DOM in a structured way that cannot be automatically inferred. It has to be learned by looking at both the CSS (often buried in many component files) and how the components are implemented in the DOM. In large projects, this is far from trivial. And I think that's the key. When people say "handwritten" CSS is either, what they mean is that their small project, with no other contributors, is easier to manage. When picking up a Tailwind project, what's to learn again? You might forget some of the class names, but if you already know the CSS properties, you're 80% there. With your IDE's completion, you're 90%. And crucially, no context switching whatsoever.
- const_cast 1y ago
  Classic CCS styles have zero maintenance burden, because they're never maintained. They're treated as read-only and every dev just tacs on and then you have 20 different buttons. In my experience.
lenkite 1y ago
All the cognitive load you save is immediately burdened by scanning 60-100 CSS classes in a 200-300 line length HTML element. And this repeated over and over and over in a ginormous number of lines. Giving you a massive migraine. Turns out HTML size also increase by 7-20x in tailwind CSS. Tailwind CSS is "write-only" code. Maintaining a site developed by someone else who has gone full-blown worship of the Tailwind Dao is a nightmare.
- setnone 1y ago
  I guess Tailwind Dao masters are outmatched only by HTML Vice Police :) Look, it's strictly pragmatic approach, i end up creating utility classes anyway and i'm really glad someone did this for me. Maintaining Tailwind (or a mix of Tailwind and CSS) is routine, just like it should be. And i'm talking about web app development, markup is cluttered anyway (tsx or whatnot), semantic effort is already put in components and such. So yeah, saving some cognitive load works and helps in case of Tailwind.

How's your experience maintaining styles written in this manner? My experience has been increased cognitive load when I come back to tailwind styles after a long time, when compared to dealing with handwritten CSS selectors and classes

switz 1y ago
To the contrary, far less cognitive load. I don’t have to internalize a class name and where it lives in a style sheet and then context switch between the two.
- skydhash 1y ago
  No one does. You either use the web inspector if you need a global view or do a grep to find where the class is being defined. Tailwind is only useful if you have some kind of templating system where you can define components. And in this case, it’s very easy to scope your css.
vehemenz 1y ago
I don't see how that's possible. My experience has been the exact opposite. When you say "handwritten CSS selectors and classes," what you really mean is learning a unique codebase with high levels of abstraction that map on to the DOM in a structured way that cannot be automatically inferred. It has to be learned by looking at both the CSS (often buried in many component files) and how the components are implemented in the DOM. In large projects, this is far from trivial. And I think that's the key. When people say "handwritten" CSS is either, what they mean is that their small project, with no other contributors, is easier to manage. When picking up a Tailwind project, what's to learn again? You might forget some of the class names, but if you already know the CSS properties, you're 80% there. With your IDE's completion, you're 90%. And crucially, no context switching whatsoever.
const_cast 1y ago
Classic CCS styles have zero maintenance burden, because they're never maintained. They're treated as read-only and every dev just tacs on and then you have 20 different buttons. In my experience.

lenkite 1y ago

All the cognitive load you save is immediately burdened by scanning 60-100 CSS classes in a 200-300 line length HTML element. And this repeated over and over and over in a ginormous number of lines. Giving you a massive migraine. Turns out HTML size also increase by 7-20x in tailwind CSS. Tailwind CSS is "write-only" code. Maintaining a site developed by someone else who has gone full-blown worship of the Tailwind Dao is a nightmare.

setnone 1y ago
I guess Tailwind Dao masters are outmatched only by HTML Vice Police :) Look, it's strictly pragmatic approach, i end up creating utility classes anyway and i'm really glad someone did this for me. Maintaining Tailwind (or a mix of Tailwind and CSS) is routine, just like it should be. And i'm talking about web app development, markup is cluttered anyway (tsx or whatnot), semantic effort is already put in components and such. So yeah, saving some cognitive load works and helps in case of Tailwind.