The patterns are easy to learn (for me) and makes building components very quick while still being very customizable without having to add a whole bunch of one-off styles. And everything is still standardized.

It also removes the need to constantly reference CSS at all, and can just stick to HTML/JSX instead. It can get very verbose though, but that's a minor trade-off I think.

+1 for the reasons to use Tachyons.

Very easy to learn and reference in future.

Documentation include examples that can be used as base for minor customisations.

From someone coming from non CSS/UI/web/design background, Tachyons is very approachable in ways others are not.

My website made with Tachyons: https://aravindh.net

It's a direct 1-to-1 mapping to inline styles so why not just use inline styles? If the answer is "standardization" then using CSS as it is normally used is the logical conclusion of that concept.

Inlines styles are verbose and hard to change. Component styles allow us to build up components and customize as needed, but the styles themselves are well defined and coherent.

For example: MA1 (margin-all-size1) and MA2 (margin-all-size2) allow me to make a component with more margin, but the margin steps are standardized so everything will follow the same sizing and fit together well, and can be changed easily in one spot later if necessary.

It really only takes a few days at most to get used to the class names, and then you can easily tell everything about the component by just looking at the HTML. We follow an internal rule to place spacing first, then borders, then text, then colors at the end.

> MA1 (margin-all-size1) and MA2 (margin-all-size2)

Honestly these aren't too bad. But all the CSS frameworks I've seen of this style instead are like MA-10 (margin all 10- pixels) and MA-20 (margin-all 20 pixels) which of course completely defeats the idea of standardized steps beyond limiting you to that subset.

I think there is some value to a few of these styles in any project but ultimately you get more standardization with semantic names. "alert-danger" instead of "alert-red" for example.

There's no reason you can't combine then, and frameworks like Tailwinds mentioned above let you make those combined styles through config automatically.

However, my point was that it's a great fit for React and other SPA frameworks, where you can just create a <DangerAlert /> component instead, and inside you can use component styles.

But whatever works for you.

But if you're isolating styles inside react components, you're back to being able to use inline-styles. You can just functions and variables if you need standardization. Something like Tailwinds adds a level of indirection not a level of abstraction.