📝 CSS-Tricks 268: Just in Time CSS, the EyeDropper API, and the problem with iOS

View this newsletter on the web.

[Robin]: One of the criticisms thrown at writing Atomic CSS is that it generates a ton of classes that your users don’t need. Let’s say you want to add some padding to the top of an element, like this:

<div class="pt-20"></div>

This is all fine and dandy—and it sure is neat that I don’t have to write a custom CSS class just to add padding and all—but with a lot of frameworks you’d have all the classes for up, down, left, and right padding in your CSS like this:

.pr-20 { padding-right: 20px; } .pt-20 { padding-top: 20px; } .pb-20 { padding-bottom: 20px; } .pl-20 { padding-left: 20px; } 

Now let’s say we don’t use the other three classes in our codebase, well, we’re now potentially sending a ton of code down the wire that the user never needs. Multiply that by all the classes in these sorts of frameworks and that could become a genuine performance concern.

This is where tools such as acss.io comes in. As Chris wrote about the other day, with acss.io you can write some HTML…

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

…and these declarations will then create CSS like this under the hood for you:

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

(Those selectors only look weird because you have to escape certain characters in CSS selectors).

It sounds like folks are calling this “Just in Time” CSS and both the idea and the name makes a whole bunch of sense to me. For example, Assembler CSS leans into this hard:

And Tailwind supports it now, too:

My hunch is that this “Just in Time” CSS stuff is how folks will primarily use Atomic CSS in the future—which is good for us as developers and our users. The alternative, if you’re using utility classes / atomic CSS, is to purge the unused stuff. Gotta do one or the other to avoid sending far too much CSS and doing exactly the opposite of what you’re trying to do (ship more CSS instead of less).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s