3 ms·

Their argument is that the idea of separating content from presentation was always a lie, and that your JS, CSS, and HTML code is always intertwined. I've found

Their argument is that the idea of separating content from presentation was always a lie, and that your JS, CSS, and HTML code is always intertwined. I've found this to be partly true for web apps. Tailwind is essentially unusable without a build step. You can configure it to make composite classes for common styles (button, card, etc.), but if you buy into their philosophy you'll probably want a component-based design (web components, React, Vue, etc). It's better than working with CSS manually because you work at a slightly higher level. If it was transformed into a css-like language I would prefer that. As a non-UI expert, I also enjoy having an enumerable limited set of sane choices for most properties.

deltron3030 7y ago
>if you buy into their philosophy you'll probably want a component-based design (web components, React, Vue, etc). With tailwindcss or tachyons you get some of the benefits of component frameworks without having to use component frameworks, because you can colocate html & "styles" in regular template based systems and scope sections on a page this way. Great DX if you need to render sections conditionally, e.g. for ab testing. If you think in sections rather than individual components anyway, which tailwind kind of promotes by design, you don't gain that much with a component framework. The actual CSS functions like an inverted triangle (see ITCSS) the utility classes access from the html, so you won't have any specificity issues because it's already sorted out by having the CSS in a fixed order. Another advantage is portability of sections between modern frontend JS frameworks and template based systems, you can just copy and paste things around, which is harder if the information about the styles is separated from the html, and without a fixed inverted triangle like CSS structure.
- iudqnolq 7y ago
  What if you want every link (from the perspective of the user, not based on the tag type) to have the exact same style? How would you do that without some sort of build step with an atomic unit for a link? Isn't a section just a case of a component?
  - deltron3030 7y ago
    You could define the anchor element in the preflight.css file (normlize.css/reset). Yeah, a section is a component, but in my book it also involves the visible page background where the element is located (you could override the page background with a section color), like a slice of the page.
    - iudqnolq 7y ago
      Fair enough. I'd call that definition a component.

deltron3030 7y ago

>if you buy into their philosophy you'll probably want a component-based design (web components, React, Vue, etc). With tailwindcss or tachyons you get some of the benefits of component frameworks without having to use component frameworks, because you can colocate html & "styles" in regular template based systems and scope sections on a page this way. Great DX if you need to render sections conditionally, e.g. for ab testing. If you think in sections rather than individual components anyway, which tailwind kind of promotes by design, you don't gain that much with a component framework. The actual CSS functions like an inverted triangle (see ITCSS) the utility classes access from the html, so you won't have any specificity issues because it's already sorted out by having the CSS in a fixed order. Another advantage is portability of sections between modern frontend JS frameworks and template based systems, you can just copy and paste things around, which is harder if the information about the styles is separated from the html, and without a fixed inverted triangle like CSS structure.

iudqnolq 7y ago
What if you want every link (from the perspective of the user, not based on the tag type) to have the exact same style? How would you do that without some sort of build step with an atomic unit for a link? Isn't a section just a case of a component?
- deltron3030 7y ago
  You could define the anchor element in the preflight.css file (normlize.css/reset). Yeah, a section is a component, but in my book it also involves the visible page background where the element is located (you could override the page background with a section color), like a slice of the page.
  - iudqnolq 7y ago
    Fair enough. I'd call that definition a component.