Open Props (and Custom Properties as a System)

CSS custom properties offer a straightforward approach to design tokens: reusable units like colors, fonts, spacing, and timing. Relying primarily on these tokens promotes clean, consistent design—a key objective in web development. This approach mirrors the appeal of utility-class frameworks:

The popularity of utility-class frameworks stems from their pre-configured classes, leading to aesthetically pleasing designs. The limited selection of values ensures a consistent, professional look.

Consider these examples: using pre-defined classes:

<h1 id="Header">Header</h1>

...is comparable to utilizing CSS custom properties:

html {
  --color-primary: green;
  --size-large: 3rem;
  /* ... more tokens */
}

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

Both offer zero-build options. Frameworks like Tachyons provide ready-to-use utility classes, while Windi employs a just-in-time compiler. Similarly, Pollen offers a pre-built library of custom properties, and the innovative Open Props uses a just-in-time compiler to only include used properties.

Introducing Open Props:

Open Props is essentially a comprehensive collection of CSS custom properties, serving as a robust foundation for styling. It emphasizes a "custom property-first" approach, mirroring the established practice of design tokens with a predefined set of options.

The parallels are clear:

Open Props' attractive default values are likely its main draw.

However, Open Props doesn't eliminate the need for naming elements; you still utilize standard CSS selectors (similar to named classes) to target and style elements. The key difference is leveraging pre-defined custom properties instead of manually creating values.

The core Open Props library (source available) weighs in at a mere 4.4kb (based on DevTools measurements). This excludes your custom CSS, representing minimal overhead. While additional PropPacks increase the size, they remain small, and the just-in-time compilation addresses size concerns. You can experiment with this on StackBlitz.

Open Props offers a compelling solution. Its reliance on standard CSS ensures future compatibility and flexibility.

The above is the detailed content of Open Props (and Custom Properties as a System). For more information, please follow other related articles on the PHP Chinese website!