6 ms·

This is really great, and I'm really happy people are finally waking up to this. I've stuck with Django through all of this and never looked back. Nowadays with

This is really great, and I'm really happy people are finally waking up to this. I've stuck with Django through all of this and never looked back. Nowadays with stuff like HTMX, things have never been better! Could we do this for CSS-in-JS next please? With React 18 making a strong push for compiled CSS, we have libraries now that let you write CSS (compiled) using Typescript. This is also absolutely crazy to me because we COULD BE JUST WRITING CSS instead (especially with variable support).

di4na 4y ago
I have a whole piece coming down the pipeline on this. I think a huge reason the js crowd got away with the "better DX" spiel is because CSS got left on the side. So doing it CSS-in-JS allowed to paper over the CSS painpoint for componentisation and composition. If you look at it this way, Tailwind make sense. Because what it gives you is mixins and variable. Just... Mixins in html `class`
cutler 4y ago
CSS has been mangled so many different ways, including the loathsome Tailwind, that I can't imagine what a newb web dev has to plough through these days. Some of us with longer memories were overjoyed to see browsers finally adopting standards after the erosion of Microsoft's reign but now it appears we're intent on destroying the value of what we waited 15 years for. Fer Kreissakes just write raw, unadulterated CSS and enjoy your freedom from the CSS hacks that were unavoidable back in the late 90s/early 2000s.
- beezlewax 4y ago
  Refreshing to see someone else who hates Tailwind. It's a nightmare.
  - cutler 4y ago
    The worst Tailwind I've seen is HTML littered with a, a:hover etc. declarations on every hyperlink. OK, you can create a global Tailwind stylesheet in your config but doesn't that defeat Tailwind's purpose?
    - brycewray 4y ago
      According to Adam Wathan himself in 2020, yes, it does: https://twitter.com/adamwathan/status/1226511611592085504 https://twitter.com/adamwathan/status/1226511611592085504
      - cutler 4y ago
        Oh, and that's discounting responsive breakpoints. So if you have 3 of those that can be 3 lots of a, a:hover etc. for every hyperlink. You couldn't make this up.
  - earthling8118 4y ago
    From what I can tell, this is a very common take. Especially on this site.
  - naasking 4y ago
    Haha, I love Tailwind and Tachyons! Writing CSS is still a PITA.
  - pydry 4y ago
    What do you prefer & why? As a somewhat outsider to CSS I look at tailwind and don't feel excited but I do wonder if thats as good as it gets.
    - cutler 4y ago
      I prefer CSS. We even have browser support for CSS variables now so what else do you need? Tailwind wipes out half of the features of CSS and replaces them with mindless inline repetition and bloat all in the name of convenience. I call it inconvenience and refuse to work on Tailwind projects.
      - Zababa 4y ago
        > We even have browser support for CSS variables now so what else do you need? Not writing CSS in a different file and have it applied to all my page would be a start. Creating a class for each different component and then writing CSS for that component is not really great. I like the Svelte way where you have your components that have HTML, CSS and JS, and some global CSS too.
        komali2 4y ago
        > Not writing CSS in a different file and have it applied to all my page would be a start. Are you saying you do or don't want CSS in a different file? You can have whichever you please. You can put your CSS in style tags on an html document if you want, or use javascript to inject a style tag wherever, that you can write inside a template string, I guess. Depending on whatever templating language system you're using, you can put css in that language's version of style blocks, such as in React or Vue I've seen .jsx or .vue files with blocks of styling code in them (usually just option 2 above with sugar, using js to inject a style tag). > Creating a class for each different component and then writing CSS for that component is not really great. You can use CSS variables and basic rules to combine styles if you'd like? I'm not exactly sure what you mean. I mean, the styles cascade, what are you trying to accomplish that can't be done easily by using a universal rule to apply some baseline fonts or what have you?
Kiro 4y ago
Wow, I truly hope you are wrong. Non-scoped CSS where you have to come up with names for everything and that doesn't live right next to the markup in the same file as the component is the worst. The whole cascading part is also something I hope I never have to deal with again with conflicting styles being inherited and overridden all over the place. Just let me isolate everything and let me freely copy a component file with all styling included without relying on any global CSS.
- jstummbillig 4y ago
  What do you do to keep your inter component styling in sync?
  - darkhorse13 4y ago
    In my experience, this is usually solved with more TS/JS abstractions, something like global theming. Often they are hacky and poorly implemented, and always they are leaky.

di4na 4y ago

I have a whole piece coming down the pipeline on this. I think a huge reason the js crowd got away with the "better DX" spiel is because CSS got left on the side. So doing it CSS-in-JS allowed to paper over the CSS painpoint for componentisation and composition. If you look at it this way, Tailwind make sense. Because what it gives you is mixins and variable. Just... Mixins in html `class`

cutler 4y ago

CSS has been mangled so many different ways, including the loathsome Tailwind, that I can't imagine what a newb web dev has to plough through these days. Some of us with longer memories were overjoyed to see browsers finally adopting standards after the erosion of Microsoft's reign but now it appears we're intent on destroying the value of what we waited 15 years for. Fer Kreissakes just write raw, unadulterated CSS and enjoy your freedom from the CSS hacks that were unavoidable back in the late 90s/early 2000s.

beezlewax 4y ago
Refreshing to see someone else who hates Tailwind. It's a nightmare.
- cutler 4y ago
  The worst Tailwind I've seen is HTML littered with a, a:hover etc. declarations on every hyperlink. OK, you can create a global Tailwind stylesheet in your config but doesn't that defeat Tailwind's purpose?
  - brycewray 4y ago
    According to Adam Wathan himself in 2020, yes, it does: https://twitter.com/adamwathan/status/1226511611592085504 https://twitter.com/adamwathan/status/1226511611592085504
    - cutler 4y ago
      Oh, and that's discounting responsive breakpoints. So if you have 3 of those that can be 3 lots of a, a:hover etc. for every hyperlink. You couldn't make this up.
- earthling8118 4y ago
  From what I can tell, this is a very common take. Especially on this site.
- naasking 4y ago
  Haha, I love Tailwind and Tachyons! Writing CSS is still a PITA.
- pydry 4y ago
  What do you prefer & why? As a somewhat outsider to CSS I look at tailwind and don't feel excited but I do wonder if thats as good as it gets.
  - cutler 4y ago
    I prefer CSS. We even have browser support for CSS variables now so what else do you need? Tailwind wipes out half of the features of CSS and replaces them with mindless inline repetition and bloat all in the name of convenience. I call it inconvenience and refuse to work on Tailwind projects.
    - Zababa 4y ago
      > We even have browser support for CSS variables now so what else do you need? Not writing CSS in a different file and have it applied to all my page would be a start. Creating a class for each different component and then writing CSS for that component is not really great. I like the Svelte way where you have your components that have HTML, CSS and JS, and some global CSS too.
      - komali2 4y ago
        > Not writing CSS in a different file and have it applied to all my page would be a start. Are you saying you do or don't want CSS in a different file? You can have whichever you please. You can put your CSS in style tags on an html document if you want, or use javascript to inject a style tag wherever, that you can write inside a template string, I guess. Depending on whatever templating language system you're using, you can put css in that language's version of style blocks, such as in React or Vue I've seen .jsx or .vue files with blocks of styling code in them (usually just option 2 above with sugar, using js to inject a style tag). > Creating a class for each different component and then writing CSS for that component is not really great. You can use CSS variables and basic rules to combine styles if you'd like? I'm not exactly sure what you mean. I mean, the styles cascade, what are you trying to accomplish that can't be done easily by using a universal rule to apply some baseline fonts or what have you?

Kiro 4y ago

Wow, I truly hope you are wrong. Non-scoped CSS where you have to come up with names for everything and that doesn't live right next to the markup in the same file as the component is the worst. The whole cascading part is also something I hope I never have to deal with again with conflicting styles being inherited and overridden all over the place. Just let me isolate everything and let me freely copy a component file with all styling included without relying on any global CSS.

jstummbillig 4y ago
What do you do to keep your inter component styling in sync?
- darkhorse13 4y ago
  In my experience, this is usually solved with more TS/JS abstractions, something like global theming. Often they are hacky and poorly implemented, and always they are leaky.