5 ms·

I had to stop immediately at “Tailwind makes code hard to read” and you’re telling me your home rolled css solution is any easier to read and understand? I woul

I had to stop immediately at “Tailwind makes code hard to read” and you’re telling me your home rolled css solution is any easier to read and understand? I would very much argue against that, as a home grown solution comes with zero precedent about how it works, so you have to go reverse engineer it from one or more source files, whereas tailwind is tailwind is tailwind in every file in every codebase. It’s okay if you don’t like something, but if you’re going to publish a hate piece like this you’re going to get criticism like this.

kall 6y ago
I think the author is arguing for using something like styled-jsx, which is the same as vue SFC styles afaik. That stays fairly manageable and readable as well.
- onethought 6y ago
  But it also is as “visually noisy” as tailwind. So it fails at his first point. Also the tailwind is bloated is disingenuous given you just remove the unused classes as Pty of your build. Bad faith points all around, maybe except the obscure naming in tailwind. But alternatives like Hucssley solve this (name the properties the same as their css counterparts)
joshxyz 6y ago
This lol. &hover, &active, etc.. fuck that.
fuzzy2 6y ago
You assume that whoever reads the code next already knows Tailwind. They do not. Tailwind might be simple, but it is undoubtedly opaque. A CSS class defined in the same application is not.
- corytheboyd 6y ago
  Tailwind has documentation is the massive difference.
  - fragile_frogs 6y ago
    So does CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
wvenable 6y ago
Isn't this true of any code though? How is CSS class naming any different than the naming of types and functions? It's easier to read and understand because it's an abstraction. Something like... <div class="button button-primary"> ...isn't going to confuse anyone. I believe tailwind is hard to read because it's basically just inlining everything tersely with very little abstraction at all.
- corytheboyd 6y ago
  It’s more about using established and documented systems vs creating new ones (where you probably don’t have documentation). Even if you do have a home grown solution that is as well documented as tailwind, you are still at a loss because nobody will be familiar with it already.
  - wvenable 6y ago
    Yeah I disagree with this. The point of writing code is create new systems. We have literally dozens of applications at my company all with the same look and feel. We, of course, created a new system that defines that look and feel. Just like we create classes, and methods, and components to maintain that. Ignoring the power of CSS to abstract style is a waste of it's potential. Now that's not to say we don't use established libraries for CSS. But we definitely add our classes and add our customization.
    - corytheboyd 6y ago
      I don’t mean to never create systems, I never said that, did it come across as me implying this? To explicit state my intent, it’s that you should strive to create as few new systems as necessary, but you’re very obviously going to need to create SOMETHING...?
      - wvenable 6y ago
        I guess I don't understand your reply. This is a critique of tailwind and the best you can say about it is that it's an existing documented system somebody else might know? I love standards, there are so many to choose from, but on the face of it tailwind doesn't seem like the best standard to choose. In places where I might find tailwind appropriate, I could use just the even more common standard of bare CSS properties.
whytaka 6y ago
Just write some SCSS and try to maintain fidelity between your nested css with the structure of your DOM. Even easier with SFC.
onelovetwo 6y ago
How do you feel about the other seemingly valid points he made from a large production project perspective?
fbelzile 6y ago
The author lost me with "Tailwind is bloated." If it's bloated, you're doing it wrong. One of the main benefits is that you can run a command that creates a custom CSS file that only include the classes you need.
- planetis 6y ago
  ...and it's explicitly mentioned in the manual, which makes me wonder, how someone quoting it (and thus pretends that has read it), missed that part. Most points are pure FUD imo, except the one talking about vertical space, and I believe it's exaggerated.
brailsafe 6y ago
This seems like an appeal to authority or popularity. While we're at it, might as well just pick the most popular library without further thought, because you couldn't possibly make a better choice, and one that everyone chooses must be intrinsically better. If you're going to offer "criticism like this", at least have something more to go on. It's not that ambitious to find a more readable solution, if a popular choice seems flawed. That's just a single hurdle to overcome.

kall 6y ago

I think the author is arguing for using something like styled-jsx, which is the same as vue SFC styles afaik. That stays fairly manageable and readable as well.

onethought 6y ago
But it also is as “visually noisy” as tailwind. So it fails at his first point. Also the tailwind is bloated is disingenuous given you just remove the unused classes as Pty of your build. Bad faith points all around, maybe except the obscure naming in tailwind. But alternatives like Hucssley solve this (name the properties the same as their css counterparts)

joshxyz 6y ago

This lol. &hover, &active, etc.. fuck that.

fuzzy2 6y ago

You assume that whoever reads the code next already knows Tailwind. They do not. Tailwind might be simple, but it is undoubtedly opaque. A CSS class defined in the same application is not.

corytheboyd 6y ago
Tailwind has documentation is the massive difference.
- fragile_frogs 6y ago
  So does CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

wvenable 6y ago

Isn't this true of any code though? How is CSS class naming any different than the naming of types and functions? It's easier to read and understand because it's an abstraction. Something like... <div class="button button-primary"> ...isn't going to confuse anyone. I believe tailwind is hard to read because it's basically just inlining everything tersely with very little abstraction at all.

corytheboyd 6y ago
It’s more about using established and documented systems vs creating new ones (where you probably don’t have documentation). Even if you do have a home grown solution that is as well documented as tailwind, you are still at a loss because nobody will be familiar with it already.
- wvenable 6y ago
  Yeah I disagree with this. The point of writing code is create new systems. We have literally dozens of applications at my company all with the same look and feel. We, of course, created a new system that defines that look and feel. Just like we create classes, and methods, and components to maintain that. Ignoring the power of CSS to abstract style is a waste of it's potential. Now that's not to say we don't use established libraries for CSS. But we definitely add our classes and add our customization.
  - corytheboyd 6y ago
    I don’t mean to never create systems, I never said that, did it come across as me implying this? To explicit state my intent, it’s that you should strive to create as few new systems as necessary, but you’re very obviously going to need to create SOMETHING...?
    - wvenable 6y ago
      I guess I don't understand your reply. This is a critique of tailwind and the best you can say about it is that it's an existing documented system somebody else might know? I love standards, there are so many to choose from, but on the face of it tailwind doesn't seem like the best standard to choose. In places where I might find tailwind appropriate, I could use just the even more common standard of bare CSS properties.

whytaka 6y ago

Just write some SCSS and try to maintain fidelity between your nested css with the structure of your DOM. Even easier with SFC.

onelovetwo 6y ago

How do you feel about the other seemingly valid points he made from a large production project perspective?

fbelzile 6y ago

The author lost me with "Tailwind is bloated." If it's bloated, you're doing it wrong. One of the main benefits is that you can run a command that creates a custom CSS file that only include the classes you need.

planetis 6y ago
...and it's explicitly mentioned in the manual, which makes me wonder, how someone quoting it (and thus pretends that has read it), missed that part. Most points are pure FUD imo, except the one talking about vertical space, and I believe it's exaggerated.

brailsafe 6y ago

This seems like an appeal to authority or popularity. While we're at it, might as well just pick the most popular library without further thought, because you couldn't possibly make a better choice, and one that everyone chooses must be intrinsically better. If you're going to offer "criticism like this", at least have something more to go on. It's not that ambitious to find a more readable solution, if a popular choice seems flawed. That's just a single hurdle to overcome.