Different Degrees of Custom Property Usage

One way to work with custom properties is to consider them as design tokens. Colors, spaces, fonts and what not. You set them at the root of the page and use them throughout your CSS. Very useful, and the classic use case for not only custom properties, but for pretreatment variables in the last one million years.

Another way to work with custom properties that can be done beyond the design token approach is to go much harder and use them for all major unique styling choices on a given item.

Imagine you have a card like this (simplified of course for demonstration purposes):

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

Lived.

But when you inevitably make variations of the card, you are alone in overriding these sets of rules. A CSS Custom Property access can be as:

.card {
  --card-background: hsl(200deg 15% 73%);
  --card-border: 4px solid rgb(255 255 255 / 0.5);
  --card-padding: 2rem;
  --card-border-radius: 8px;
  --card-title-margin: 0 0 1rem 0;
  --card-title-border: 3px solid 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 little more comprehensive now, but see what happens when we want to make a variation:

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

Here are three clear benefits just outside of bats:

  • I only change values ​​that I have clearly set up to be changed. My motherboard prototype retains the integrity I want it to retain.
  • I can style children of the variation without having to write these voters correctly.
  • I can now pass in styling overrides from style attribute in HTML for fast, one-time variations.

Less extensive with relapses

Instead of declaring custom properties at the top and then using them just below, I can do both at the same time like this:

.card {
  background: var(--card-background, hsl(200deg 15% 73%));
  border: var(--card-border, 4px solid 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 solid rgba(0 0 0 / 0.2));
}

Now if something similar --card-background happens to be set, it will override the recall value here. I do not quite love this because it means elements over .card can override it. That may be what you want, but it’s not exactly the same as declaring the values ​​you know .card level to begin with. No strong opinions here.

Breaks it up even more

An example here is that you may want to control upholstery individually.

.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 variant can just control part of the padding if I want to:

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

However, you need to be careful with the big gotcha. That is, if you declare all of these at the root, this does not work because the embedded properties have already been resolved. But as long as it was first declared .card, you’re fine here.

Too far?

Say you wanted super ultimate control over all parts of a value. E.g:

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));
}

It is little nicely, but it’s probably too far. Colors will almost certainly be declared at the root and left in peace, so the big gotcha will make it impossible to neglect children’s properties at low levels. Moreover, if you have one --color-1, you probably also have a 2-9 (or more), which is good and good because there is far more delicate design magic in a color system than simple mathematical manipulations of color parts.

Deliverable design systems?

There is no doubt that Tailwind has enjoyed great popularity. It uses an atomic approach, where a large number of HTML classes each control a property. I would argue that some of that popularity is driven by the fact that if you choose from these preconfigured classes, that design ends quite well. You can not get off track. You choose from a limited selection of values ​​that are designed to look good.

I would not go so far as to say that a Custom Properties heavy-based approach to styling is exactly the same. For example, you should still think of a class name abstraction rather than applying styling directly to the HTML element. But it may enjoy some of the same limitations / restrictions that make Tailwind and other nuclear class methods desirable. If you can only choose from a predefined set of --spacing-x values, --color-x values, and --font-x values, you may achieve a more cohesive design than you would otherwise have.

Personally, I have found that a design system that is stronger based on Custom Properties feels good – if nothing else to make variations and overrides more sensible to manage.

How about third-party design systems that deliver what they deliver as … nothing but a large set of custom properties that can be used for your leisure time?

Pollen

Third-party deliveries do not even have to be the whole kitchen sink like this. For example, Adam Argyles transition.style provides a “Hackpack” that is nothing more than custom features for transition animators.

Understandable price

One setback I’ve heard against this more all-in approach to custom features is the newcomer’s intelligibility. Whose you wrote the system, it probably makes perfect sense to you. But it’s an extra abstraction on top of CSS. CSS knowledge is shared by all, tailored system knowledge is shared only by the people who are actively working on it.

Rolling fresh to a system that largely uses custom features will have a heck of a learning curve.

Videos

Leave a Comment