3 ms·

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

by mikl 7y ago

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.

Moru 7y ago
That already exists in email newsletter creation tools so I guess you were right there :)
- lfischer 7y ago
  Also in the React community, there are already ultra-generic component collections like https://rebassjs.org/ https://rebassjs.org/.
lfischer 7y ago
What you describe sounds like the way some use CSS-in-JS frameworks as emotion or Styled Components.
- mikl 7y ago
  Yeah, they’re currently just one step away, generating class names on the fly and attaching those classes to elements.
ratww 7y ago
> 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://github.com/acss-io/atomizer / https://acss.io/guides/atomizer.html https://acss.io/guides/atomizer.html

by mikl 7y ago

Moru 7y ago

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

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

lfischer 7y ago

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

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

ratww 7y ago

> 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://github.com/acss-io/atomizer / https://acss.io/guides/atomizer.html https://acss.io/guides/atomizer.html