Open Props (and Custom Properties as a System)

Perhaps the most basic and obvious use of CSS-adapted properties is the design token. Colors, fonts, spaces, timings, and other atomic design pieces that you can subtract while designing a website. If you virtually only subtracting values ​​from design tokens, you will be heading towards clean design and the consistent professional look that is typically the goal of web design. In fact, I’ve written that I think this is exactly what contributes to the popularity of utility class frameworks:

I would argue that some of that popularity is driven by the fact that if you choose from these preconfigured classes, the design ends quite nicely. You can not get off track. You choose from a limited selection of values ​​that are designed to look good.

I say this (with a stylesheet defining these classes as one-styling-job-tokens):

<h1 class="color-primary size-large">Header<h1>

… Is a similar value proposition as this:

html {
  --color-primary: green;
  --size-large: 3rem;
  /* ... and a whole set of tokens */
}

h1 {
  color: var(--color-primary);
  font-size: var(--size-large);
}

There are zero-built versions of both. For example, Tachyons is an it-is-what-it is stylesheet with a number of help classes you just use, while Windi is a totally fancy thing with a just-in-time compiler and such. Pollen is an it-is-what-it-is library of custom properties you just use, while the all-new Open Props has a just-in-time compiler to deliver only the custom properties used.

Okay, so open props!

It’s literally just a whole bunch of CSS-customizable features you can use to design things. It’s like a solid starting point for your styles. It says custom property all things, but in the way we are already used to with design tokens, where they are a limited predetermined number of choices.

The analogies are clear to people:

My guess is what will draw people to this are the beautiful default settings.

What that do not do doing is to prevent you from having to name things, which is something I know utility class lovers really enjoy. Here you should continue to use regular old CSS selectors (as with named classes) to select things and style them as you “normally” would. But instead of handcrafting your own values, you pick values ​​from these custom properties.

The whole basic thing (you can see the source here) rolls in with 4.4 kb over the wire (that was at least what my DevTools showed). It does not include the CSS you type to use the custom properties, but it is a fairly small amount of overhead. There are additional PropPacks that increase the size (but so are you super small), and if you’re worried about size, that’s what the whole just-in-time thing is about. You can play with it on StackBlitz.

It seems pretty sweet to me! I would use it. I like that in the end it’s just plain CSS, so there’s nothing you can not do. You stay in good shape as CSS evolves.

William

Leave a Reply

Your email address will not be published. Required fields are marked *