'Just in Time' CSS

The rise of Atomic CSS and its "instant" compilation: a new way to write CSS

acss.io is considered to be the first project to adopt the concept of "atomic CSS", and its core lies in the compilation of CSS. You just need to write CSS like this:

<code><div>
  text
</div></code>

It generates a CSS like this:

 <code>.C\(\#333\) { color: #333; } .P\(20px\) { padding: 20px; }</code>

(or similar code).

The key is that it only generates the CSS you actually need, no more or less. The final generated amount of CSS code is much smaller than that of the normal style sheet.

This compilation process is called "Just in Time" CSS.

The popular Tailwind framework also supports this approach. For me, this upended Tailwind's mindset. Instead of providing a large number of CSS utility classes and then "cleaning" unused parts, it only creates the necessary CSS from the beginning.

I think the concept of "instant" CSS is in popularity. I've seen Assembler CSS recently and it takes this very seriously. It doesn't work like using classes, but like this:

<code><div x-style="grid; gap:1rem; grid-rows:1; grid-cols:1; sm|grid-cols:3">
  Submit
</div></code>

I'm a little bit conflicted with this approach. On the one hand, I like the way it styles without leaving the template, and especially like the very small amount of CSS code it generates, because CSS is a blocking resource. But on the other hand, I don't like it's restrictive abstraction of CSS itself, leaving you under the degree to which the tools support CSS native features. It also makes HTML look a little complicated - although I'm used to things like inline event handlers in JSX.

The above is the detailed content of 'Just in Time' CSS. For more information, please follow other related articles on the PHP Chinese website!