Open Props (and Custom Properties as a System)

Perhaps the most basic and obvious use of CSS custom properties is design tokens. Colors, fonts, spacing, timing, and other design elements that you can bring in when designing your site. if you quite a lot By simply taking the value from the design token, you are directed towards a clean design and a consistent professional look, which is the goal of web design in general. In fact, I wrote that this is exactly what I think contributes to the popularity of utility class frameworks.

Part of its popularity claims to be due to the fact that the design is quite nice if you choose from these pre-configured classes. You can’t get off the rails. You are choosing from a limited set of nicely designed values.

I’m saying this (using a stylesheet that defines this class as a single styling action token).

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

… is a value proposition similar to:

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

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

Both have zero build versions. E.g, Tachyon It’s just a stylesheet with lots of utility classes to use. windy It’s totally cool with Just-In-Time compilers, etc. pot It’s a library of out-of-the-box custom properties and is a completely new open props Have just-in-time compiler Pass only custom properties that are used.

right, so open props!

Everything is literally a whole pile of CSS custom properties that you can use in your design. It’s like a huge starting point for your style. are you saying all custom properties, but we are already accustomed to design tokens, which are a limited number of pre-determined choices.

The analogy is clear to people.