One option to work with Customized Properties is to think about them as design tokens. Colours, spacings, fonts, and whatnot. You set them on the root of the web page and use them all through your CSS. Very helpful, and the basic use case for not solely Customized Properties however for preprocessor variables for the final a million years.

One other option to work with Customized Properties, which could be accomplished along with the design tokens strategy, is to go quite a bit more durable and use them for each main distinctive styling selection on any given component.

Think about you may have a Card like this (simplified for demonstration sake, after all):

.card {
  background: hsl(200deg 15% 73%);
  border: 4px stable rgb(255 255 255 / 0.5);
  padding: 2rem;
  border-radius: 8px;
.card > h2 {
  margin: 0 0 1rem 0;
  border-bottom: 3px stable rgba(0 0 0 / 0.2);

High quality.

However then if you inevitably make variations of the cardboard, you’re by yourself to override these rulesets. A CSS Customized Property strategy could be like:

.card {
  --card-background: hsl(200deg 15% 73%);
  --card-border: 4px stable rgb(255 255 255 / 0.5);
  --card-padding: 2rem;
  --card-border-radius: 8px;
  --card-title-margin: 0 0 1rem 0;
  --card-title-border: 3px stable rgba(0 0 0 / 0.2);

  background: var(--card-background);
  border: var(--card-border);
  padding: var(--card-padding);
  border-radius: var(--card-border-radius);
.card > h2 {
  margin: var(--card-title-margin);
  border-bottom: var(--card-title-border);

A bit of extra verbose, for now, however look what occurs once we wish to do a variation:

.card-variation {
  --card-background: purple;
  --card-padding-block: 2.5rem;
  --card-title-margin: 0 0 2rem 0;

Listed below are three clear benefits proper off the bat:

  • I’m solely altering values that I’ve clearly set as much as be modified. My foremost Card prototype maintains the integrity I need it to maintain.
  • I can type kids of the variation with out having to re-write these selectors appropriately.
  • I can now cross in styling overrides from the type attribute within the HTML for fast, one-off variations.

Much less verbose with fallbacks

Somewhat than declaring the Customized Properties on the high after which utilizing them proper under, I can do each on the similar time like this:

.card {
  background: var(--card-background, hsl(200deg 15% 73%));
  border: var(--card-border, 4px stable rgb(255 255 255 / 0.5));
  padding: var(--card-padding, 2rem);
  border-radius: var(--card-border-radius, 8px);
.card > h2 {
  margin: var(--card-title-margin, 0 0 1rem 0);
  border-bottom: var(--card-title-border, 3px stable rgba(0 0 0 / 0.2));

Now if one thing like --card-background does occur to get set, it would override the fallback worth right here. I don’t utterly love this, as a result of it means components above .card can override it. That is perhaps what you need, however it’s not precisely the identical as declaring the values on the .card stage to start with. No robust opinions right here.

Breaking it up much more

An instance right here is that you just may wish to individually management padding.

.card {
  --card-padding-block: 2rem;
  --card-padding-inline: 2rem;
  --card-padding: var(--card-padding-block) var(--card-padding-inline);

  padding: var(--card-padding);

Now a variation can management simply part of the padding if I need:

.card-variation {
  --card-padding-inline: 3rem;

You gotta watch out of the massive gotcha although. Which means in the event you declare all these on the root, this isn’t going to work, as a result of these nested properties have already been resolved. However as long as it’s first declared on .card, you’ll be tremendous right here.

Too far?

Say you needed tremendous final management over each a part of a price. For instance:

html {
  --color-1-h: 200deg;
  --color-1-s: 15%;
  --color-1-l: 73%;
  --color-1-hsl: var(--color-1-h) var(--color-1-s) var(--color-1-l);
  --color-1: hsl(var(--color-1-hsl));

That’s kinda neat, however it’s possible too far. Colours are nearly actually going to be declared on the root and left alone, so the good gotcha goes to make overriding the low-level little one properties unattainable. Apart from, you probably have a --color-1, you in all probability have a 2-9 (or extra) as properly, which is all properly and good as a result of there may be much more delicate design magic to a coloration system than easy mathematical manipulations of coloration elements.

Deliverable design programs?

There isn’t a doubt that Tailwind has loved quite a lot of reputation. It makes use of an atomic strategy the place a slew of HTML lessons management one property every. I’d argue a few of that reputation is pushed by the truth that in the event you select from these pre-configured lessons, that the design finally ends up pretty good. You possibly can’t go off the rails. You’re selecting from a restricted number of values which have been designed to look good.

I wouldn’t go so far as to say {that a} Customized Properties heavy-based strategy to styling is precisely the identical. For instance, you’ll nonetheless want to think about a category identify abstraction moderately than apply styling on to the HTML component. However, it would get pleasure from a few of the similar constraints/limitations that make Tailwind and different atomic class approaches fascinating. If you happen to can solely decide from a pre-defined set of --spacing-x values, --color-x values, and --font-x values, you may obtain a extra cohesive design than you’ll have in any other case.

Personally, I’ve discovered inching towards a design system that’s extra closely based mostly on Customized Properties feels good — if nothing else to make variations and overrides extra smart to handle.

What about third-party design programs delivering what they ship as… nothing however an enormous ol’ set of Customized Properties to make use of at your leisure?


Third-party deliverables don’t even must be the whole kitchen sink like this. For instance, Adam Argyle’s transition.type supplies a “Hackpack” that’s nothing however Customized Properties of transition animation helpers.

Understandabilty price

One pushback I’ve heard towards this extra all-in strategy on Customized Properties is newcomer understandability. If you wrote the system, it in all probability makes good sense to you. Nevertheless it’s an extra abstraction on high of CSS. CSS information is shared by all, bespoke programs information is just shared by the individuals actively engaged on it.

Rolling in contemporary to a system closely utilizing Customized Properties goes to have a heck of a studying curve.


#Levels #Customized #Property #Utilization

Leave a Reply

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