Atomizer VS tachyons

Tailwind CSS is a CSS framework that has gained incredible popularity, with usage skyrocketing 40% in three years, according to the State of CSS 2022. It offers benefits such as development speed, maintainability, and gzip optimization. As a result, it is expected to exceed 50% in the 2023 survey. However, the readability of Tailwind CSS decreases sharply as the style becomes more complex, which is a typical disadvantage of the utility-first approach. Personally, I recommend my library, CSS Lube, but in this article, I would like to introduce some simple tips that can improve the developer experience when using the Atomic CSS approach.

Dokumentasi resmi ACSS: https://acss.io/

Language - Master is a language, but it was originally inspired by ACSS's concept of atomic classes.

Tailwind and React are two leading technologies in their sphere. Tailwind CSS simplifies the concept of Atomic CSS, enabling developers to style their UI by adding some classes to their markup. And with the performance improvements that come with the new JIT compiler, Tailwind CSS has become a clear developer's favorite.

Atomic frameworks like Atomic CSS and Tailwind takes a single purpose approach to selectors, so CSS properties are naturally never overlapping – this is also why Tailwind's @apply is an anti-pattern when overused.

It sure is ugly-looking but it works well! Drawing inspiration from Atomic CSS and utility classes (1 class = 1 style), Tailwind makes a few strong design decisions:

Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function.

There are all kinds of approaches people take to maintain clean HTML/CSS, such as BEM or Atomic CSS.

Tachyons CSS was also around at the same time but Tailwind had simpler naming conventions so instead of `br4` you had `rounded-lg`.

1. https://tachyons.io/

But in this example we will take a preset with Tachyons, a once popular library. But here the naming is even more deplorable:

I chose Tachyons over Tailwind because Tachyons is an atomic CSS framework, similar to Tailwind, however it's much lighter weight. Tailwind tends to be a bit heavier without using post CSS processing so I wanted to stick with something smaller.

The CSS framework we will use in this project is Tachyons CSS, which we will install by running the command below in the terminal.

> (https://github.com/tachyons-css/tachyons)

What makes this 'functional'? Is it related to functional programming? Or is it used as a synonym for 'usable'?

Tachyons is a similar utility class framework, and a lot smaller at somewhere under 20kb, IIRC.

https://tachyons.io/

I like using a functional CSS library (tachyons.io, tailwindcss, or SLDS) and setup components separately. The CSS has my colors and units declared (and the aim is to not have 40 different gray colors, it's to limit yourself with a definition list). Then the actual components are setup via a component library. Plenty to choose from: React, VueJS, LWC, AngularJS, or just native web components.

Therefore, I totally got to buy in for the utility-first approach. In that world, the only thing is worth mentioning is Tachyons. However, although it came way earlier than Tailwind, it is said to be feature-complete, and one cannot expect new features to be added or problems discussed. The latest release is almost five years old, which definitely violates the principle “Bleed Responsibly”. You can also see that from the star trend: