Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

There is a thing called Atomic CSS. You use shorthand to apply styles directly in HTML. An example from their docs:

<div class="Bgc(#0280ae.5) C(#fff) P(20px)">
    Lorem ipsum

That will apply these classes:

.P\(20px\) {
  padding: 20px;
.C\(\#fff\) {
  color: #fff;
.Bgc\(\#0280ae\.5\) {
  background-color: rgba(2,128,174,.5);

But where do those classes come from? Does CSS get loaded that loads all possible combinations of numbers and colors? That’s apparently what Atomizer is for. It’s a preprocessor of shorts, but I’m afraid one we don’t offer right now on CodePen.

Pankaj Parashar created a Chrome/Opera Extension to make it work. Here’s a GIF from that repo’s README:

Pretty cool example of implementing a feature by taking matters into your own hands! It’s open source, so that might give y’all a head start if you’ve ever wanted to do something similar.