In Defense of Utility-First CSS (2018)

Re:In Defense of Utility-First CSS (2018) by mikl on Saturday November 16, 2019 @11:29AM (#21553416)

Utility-classes like `font-16 font-bold font-purple` are essentially just shorthand for writing inline CSS. You are defining the styling in HTML, with a utility CSS file as go-between, true, but if you use Tachyons or Tailwind the way they’re supposed to be used, the way to change the look of an element is to go edit the HTML.

For component libraries, that makes a lot of sense. You re-use snippets of HTML that is styled a certain way. No need to set up another re-use layer using CSS.

I expect the next level of utility-first CSS will do away with the CSS file altogether, and start baking the resulting styles directly into the HTML, so <div tx(['font-bold', 'font-16', 'font-purple'])> would be transformed by whatever you use for HTML rendering into <div style="font-weight: bold;font-size: 16px;color: purple">. That would complete the circle and cut away a lot of complexity.

[ Parent | on HN ]

Re:In Defense of Utility-First CSS (2018) by lfischer on Saturday November 16, 2019 @11:34AM (#21553461)

What you describe sounds like the way some use CSS-in-JS frameworks as emotion or Styled Components.

[ Parent | on HN ]

Re:In Defense of Utility-First CSS (2018) by mikl on Saturday November 16, 2019 @04:43PM (#21555161)

Yeah, they’re currently just one step away, generating class names on the fly and attaching those classes to elements.

[ Parent | on HN ]

Re:In Defense of Utility-First CSS (2018) by ratww on Saturday November 16, 2019 @01:14PM (#21554041)

> I expect the next level of utility-first CSS will do away with the CSS file altogether, and start baking the resulting styles directly into the HTML

It's not exactly the same thing, but Atomizer [0] generates a CSS file from HTML, by translating class names into functional CSS rules.

The problem with inline CSS is that it has some limitations, notably lack of support for selectors like :hover, :focus, etc, and pseudo-classes like :before and :after.

[0] https://github.com/acss-io/atomizer / https://acss.io/guides/atomizer.html

[ Parent | on HN ]

Re:In Defense of Utility-First CSS (2018) by Moru on Saturday November 16, 2019 @11:32AM (#21553449)

That already exists in email newsletter creation tools so I guess you were right there :)

[ Parent | on HN ]

Re:In Defense of Utility-First CSS (2018) by lfischer on Saturday November 16, 2019 @11:41AM (#21553509)

Also in the React community, there are already ultra-generic component collections like https://rebassjs.org/.

[ Parent | on HN ]