4 ms·

Kind of hard to see Bootstrap and Tailwind so casually lumped together with regard to how they break semantics, as they are at least an order of magnitude apart

Kind of hard to see Bootstrap and Tailwind so casually lumped together with regard to how they break semantics, as they are at least an order of magnitude apart in that. Bootstrap will throw in a p-0, but Tailwind is designed to essentially make everything a p-0. And that's an important distinction, as I think the current challenge with CSS for designers (and everyone) is that it now sits between design and development. That is, we've long departed the document model use case, wherein you're simply laying out a static Website that you just want to be consistently styled across pages and easily changeable (perhaps the optimal semantic use case). We now build apps wherein we encourage essentially inline styles to be co-located with components. That itself is a complete rejection of the semantic CSS model. And it's exactly why Tailwind—being explicit about its purpose in an application development context—goes that order of magnitude beyond Bootstrap. But, how does a designer work semantically in this context? I think there are a lot of things wrong with Web development these days and styling at the component level is an example of one. Tailwind is the right tool for the wrong job. It solves a problem that shouldn't exist. And, in doing so, tempts some to believe CSS is the problem. Edit: Don't get me wrong. CSS has its own problems and a good number of them. But it can't be blamed for not being used semantically in the current Web development environment.

PaulHoule 3y ago
The designer doesn't work semantically. Working with tailwind is like digging the hole for a pool with a spoon instead of a bulldozer. They repeat the same tailwind classes 20,000 times and if the application gets bigger they repeat it 40,000 times and if they have to change the way it looks it is the mother of all cut and paste jobs. There is an unholy convergence of the tools being almost but not quite adequate, the platform being driven by companies that have overly favorable unit economics (Google could care less if it cost $2M to make a simple web site) and a designer mindset that is all too comfortable with trading a bulldozer for a spoon. Tailwind would be a lot more appealing to me if it was coupled with some system where I could say "class X inherits from tailwind classes A, B and C" and thus have a layer of abstraction over just writing properties.
- unclebucknasty 3y ago
  Exactly. It's the frameworks driving the abuse. I actually think CSS is the wrong tool for modern webdev. Or rather, it should be the output of a compile process instead of something that designers and developers wrestle with. In general, we're building these complex SPAs, and still working directly in standards that were intended for a static document model. Part of the reason is we somehow believe we need infinite customizability, so for that we're writing in Assembly. But, the truth is that user interfaces are largely consistent and should be. Still, even if we did want maximal customizability, we should use tooling that generates the CSS, etc. And that tooling should be visual. I mean think about the fact that we're trying to hand code visual designs with text. Or that it was so accepted that we're only recently trying to generate the code from design tools like Figma, which is still imperfect. So many thousands of developer hours lost to this effort. Bass-ackwards to be sure.
  - PaulHoule 3y ago
    Maybe it is the properties that are good and the selectors that are bad. One could point to a trend in the last 15 years of HTML and CSS being tuned up as an application platform. I'd point out the grid layout and flexbox as being features ideal for application work and https://www.w3.org/TR/2011/WD-html5-20110405/forms.html#forms https://www.w3.org/TR/2011/WD-html5-20110405/forms.html#form... is practically a love letter for applications.
    - unclebucknasty 3y ago
      Agreed on grid layout and flexbox. Took them a while to "fully" land, but now that they're here, they also represent a good model for visual design tools to work with as output.
  - deleted 3y ago
    [deleted]
- e12e 3y ago
  > Tailwind would be a lot more appealing to me if it was coupled with some system where I could say "class X inherits from tailwind classes A, B and C" How is that different from: D { @apply A B C; } Or creating a new utility? https://tailwindcss.com/docs/adding-custom-styles#using-modifiers-with-custom-css https://tailwindcss.com/docs/adding-custom-styles#using-modi...
mock-possum 3y ago
> Tailwind is the right tool for the wrong job. It solves a problem that shouldn't exist. And, in doing so, tempts some to believe CSS is the problem. This articulates a problem I’ve had with Tailwind for a while, and not quite been able to put words to.

PaulHoule 3y ago

The designer doesn't work semantically. Working with tailwind is like digging the hole for a pool with a spoon instead of a bulldozer. They repeat the same tailwind classes 20,000 times and if the application gets bigger they repeat it 40,000 times and if they have to change the way it looks it is the mother of all cut and paste jobs. There is an unholy convergence of the tools being almost but not quite adequate, the platform being driven by companies that have overly favorable unit economics (Google could care less if it cost $2M to make a simple web site) and a designer mindset that is all too comfortable with trading a bulldozer for a spoon. Tailwind would be a lot more appealing to me if it was coupled with some system where I could say "class X inherits from tailwind classes A, B and C" and thus have a layer of abstraction over just writing properties.

unclebucknasty 3y ago
Exactly. It's the frameworks driving the abuse. I actually think CSS is the wrong tool for modern webdev. Or rather, it should be the output of a compile process instead of something that designers and developers wrestle with. In general, we're building these complex SPAs, and still working directly in standards that were intended for a static document model. Part of the reason is we somehow believe we need infinite customizability, so for that we're writing in Assembly. But, the truth is that user interfaces are largely consistent and should be. Still, even if we did want maximal customizability, we should use tooling that generates the CSS, etc. And that tooling should be visual. I mean think about the fact that we're trying to hand code visual designs with text. Or that it was so accepted that we're only recently trying to generate the code from design tools like Figma, which is still imperfect. So many thousands of developer hours lost to this effort. Bass-ackwards to be sure.
- PaulHoule 3y ago
  Maybe it is the properties that are good and the selectors that are bad. One could point to a trend in the last 15 years of HTML and CSS being tuned up as an application platform. I'd point out the grid layout and flexbox as being features ideal for application work and https://www.w3.org/TR/2011/WD-html5-20110405/forms.html#forms https://www.w3.org/TR/2011/WD-html5-20110405/forms.html#form... is practically a love letter for applications.
  - unclebucknasty 3y ago
    Agreed on grid layout and flexbox. Took them a while to "fully" land, but now that they're here, they also represent a good model for visual design tools to work with as output.
- deleted 3y ago
  [deleted]
e12e 3y ago
> Tailwind would be a lot more appealing to me if it was coupled with some system where I could say "class X inherits from tailwind classes A, B and C" How is that different from: D { @apply A B C; } Or creating a new utility? https://tailwindcss.com/docs/adding-custom-styles#using-modifiers-with-custom-css https://tailwindcss.com/docs/adding-custom-styles#using-modi...

mock-possum 3y ago

> Tailwind is the right tool for the wrong job. It solves a problem that shouldn't exist. And, in doing so, tempts some to believe CSS is the problem. This articulates a problem I’ve had with Tailwind for a while, and not quite been able to put words to.