Grow sales with Customer Journey Smarts with

I believe acss.io is the first usage of “Atomic CSS” where the point of it is to be a compiler. You write CSS like this:

<div class="C(#333) P(20px)">
  text
</div>

And it will generate CSS like:

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

(Or something like that.)

The point is that it only generates the CSS that you actually need, because you asked for it, and no more. The result is far less CSS than you’d see in an average stylesheet.

That compilation process is what has come to be known as “Just in Time” CSS.

The popular Tailwind framework supports it. It kind of flips the mental model of Tailwind on its head, to me. Rather than providing a huge pile of CSS utility classes to use — then “purging” what is unused — it only creates what it needs to begin with.

I’d say “Just in Time” is a concept that is catching on. I just saw Assembler CSS and it leans into it big time. Rather than classes, you do stuff like:

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

I’m pretty torn on this stuff. Some part of me likes how you can get styling done without ever leaving your templates. And I especially like the extremely minimal CSS output since CSS is a blocking resource. Another part of me doesn’t like that it’s a limited abstraction of CSS itself, so you’re at the mercy of the tool to support things that CSS can do natively. It also makes HTML a bit harder to look at — although I certainly got over that with JSX inline event handlers and such.

Comments

1. Mark Praschan

   Permalink to comment# September 10, 2021

   Yeah, but Tailwind JIT might be the best of both worlds. You have hundreds (thousands?) of helpful, predefined classes at your disposal, but it only spits out the classes you end up using. JIT is a game-changer and apparently Tailwind v3.0 will go even further.

   Reply
   • Lars Ejaas

     Permalink to comment# September 10, 2021

     I am not a bit fan of “inline” styling where the css in javascript is written inside the jsx. It sounds great to start with, but then you have hover effects, keyframes, focus-visible styles, animations, etc. ‍♂️

2. Zahidul Hossain

   Permalink to comment# September 10, 2021

   How Tailwind JIT works is much more fascinating to me. As you have already mentioned in your last paragraph, we have actually passed the line of discussion on ‘what the HTML should look to be a beautiful syntax’ when we adoptd the idea of JSX. I just like the idea that, its much more easier to manage a design system and I dont have to shift between different files to check if my box is at center of the screen.

   Reply
3. salvo

   Permalink to comment# September 10, 2021

   I am far from fascinated from the Tailwind approach on CSS. So I feel kinda the same on this.
   I believe CSS for a website should be a powerful engine. Maybe it’s difficult to write, and there’s plenty of things that can go wrong, resulting most of the time in heaps of unnecessary code or complexity. But we can succeed in building better systems with less code in other ways, with a good design, planning, optimization…

   I’m not sure who’s gonna like to change hundreds of lines in the markup instead of modifying a well written CSS codebase.

   Reply
4. Paulo Vieira

   Permalink to comment# September 10, 2021

   Two other tools worth mentioning (and which in part motivated tailwind to add JIT mode):

   WindyCSS https://windicss.org
   Twind https://twind.dev

   Reply
5. Permalink to comment# September 10, 2021

   Desnecessary abstraction as Tailwind is.

   Reply
6. Pankaj Parashar

   Permalink to comment# September 10, 2021

   Thanks for the shoutout for ACSS here. I’m pretty certain that ACSS was ahead of its time when it was created, something the CSS industry is only catching up in the last couple of years.

   One more thing to note here, is that ACSS doesn’t have any predefined set of classes to choose from. This means you can generate classes with any arbitrary values like P(21px), C(#f1f2f3) and are not just limited to the values that other framework provides.

   ACSS doesn’t dictate any styles/values and has uglification built-in to produce much leaner and thinner CSS files.

   Reply
7. Kristof

   Permalink to comment# September 11, 2021

   I don’t get it… Why using weird abbreviations in the class property for the need of a transpiler, instead of writing just classic inline styles?

   Ignoring principles like DRY or SoC is possible, but imho not meaningful.

   Some attempts on just try not to write good old CSS reminds me on the famous programming language Brainfuck and other occupational therapies.

   And another point of failure in your codebase …

   Reply
8. Carles

   Permalink to comment# September 11, 2021

   firsr of all, I must say I don’t know this tool, and maybe what I will said is obvious. I work with LESS, and write all my CSS classes from scratch. I do modular scopes of the code, and don’t worry about CSS length. For example: “.mod_featured”.

   …How this can understand that y want to scoope all CSS classes under? Also, I use common classes inside, for example: “.com_title_big” plus global design classes like: “.des_gutter”

   More than this, I think is better to get all CSS in one file, because it has been readed and cached on browser once. I’m losing something? should change my mind on small/mid sized projects?

   PD: I love so this site, thanks for it. Has a lot of tech info and helps me a lot for my daily work

   Reply
9. Permalink to comment# September 11, 2021

   Am I missing the point here? It’s just inline CSS right? The point of CSS classes is that they’re reusable.

   Reply
   • Permalink to comment# September 11, 2021

     That’s exactly what I was thinking.. that there is no difference between this and inline styling. Maybe there’s a performance gain?

   • Gustavo Nogueira

     Permalink to comment# September 11, 2021

     I feel the same way.

     What will be the befit in declaring every specific CSS attribute in the HTML elements rather than just create a CSS class to incapsulate what should be reusable?

   • Brandon McConnell

     Permalink to comment# September 12, 2021

     I think Jon may be getting at the fact that Assembler’s syntax specifically looks a lot like plain CSS syntax, but with a few dynamic additions like named breakpoints (e.g. sm|) and the caret symbol (^), and I’m sure several if not many others.

10. Brandon McConnell

    Permalink to comment# September 12, 2021

    I’m torn by much of the same. There may be some convenient advantages to including utility classes to the HTML like this, but this breaks the flow and mental model of development over all for me, and I think this could really complicate the divvying up of work on actual corporate teams. I often develop intrinsic styles like special classes and built-in HTML elements so copywriters can create pages in plain HTML without knowing a lick of CSS and still create a fully branded pages because the CSS will simply apply to those elements used, without needing any inline styles or utility classes.

    I grew up in the Bootstrap days, and Tailwind seems more meritable in some regards, but I still don’t know that I’d use it (or Bootstrap) for any production development projects where non-developers may need to construct pages. Either that, or I would need to ensure any non-devs took a course in HTML, CSS, and Tailwind (w/ JIT) before beginning their work.

    Reply
11. Benjamin Solum

    Permalink to comment# September 13, 2021

    This is the first I’ve heard of the “Just in Time” moniker for CSS and I really like it. It was always difficult to illustrate how ACSS was more than just Atomic CSS. I used ACSS extensively in the past on personal projects because I loved how lean the CSS was. It was extremely difficult to theme though and required the entire team to shift their idea of CSS authoring so I never ended up using it professionally.

    Aside from theming, the other weak point of ACSS is its developer experience imo. As SPA frameworks have taken over the CSS-in-JS tools are JUST SO EASY TO USE but I don’t always love their output.

    Now that we have custom properties for theming, I’d really love a tool that marries the DX of CSS-in-JS with the output of JIT that integrates seamlessly with IDE’s and the normal PostCSS toolchain.

    One can dream :)

    Reply
12. Austin Gil

    Permalink to comment# September 13, 2021

    This is such a cool space. I’m even working on my own take: https://particlescss.netlify.app/

    It’s not ready for production, but hopefully I can find a nice cross-section of easy to work with, supports plain CSS, and also has good DX for reusability and other stuff.

    Reply

AnimXYZ

There are quite a few CSS animation libraries. They tend to be a pile of class names that you can apply as needed like "bounce" or "slide-right" and it'll... do those things. They tend to be pretty opinionated with nice defaults, and not particularly designed around customization. It looks like…

January 18, 2021

How to Use Tailwind on a Svelte Site

Let’s spin up a basic Svelte site and integrate Tailwind into it for styling. One advantage of working with Tailwind is that there isn’t any context switching going back and forth between HTML and CSS, since you’re applying styles as classes right on the HTML. It’s all the in same…

March 12, 2021

A Better Approach for Using Purgecss with Tailwind

Greg Kohn looks at how to use Purgecss — a tool that helps remove unused styles — and Tailwind — a utility-based CSS framework — and why we might want to pair these tools together: Tailwind, by intention, is aiming to equip you with an arsenal of utility classes by…

May 15, 2019

The related posts above were algorithmically generated and displayed here without any load on our servers at all, thanks to Jetpack.