Web site Developer I Advertising I Social Media Advertising I Content material Creators I Branding Creators I Administration I System SolutionDifferent Levels of Customized Property Utilization

Web site Developer I Advertising I Social Media Advertising I Content material Creators I Branding Creators I Administration I System SolutionDifferent Levels of Customized Property Utilization

Web site Developer I Advertising I Social Media Advertising I Content material Creators I Branding Creators I Administration I System Answer

One strategy 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 traditional use case for not solely Customized Properties however for preprocessor variables for the final a million years.

One other strategy to work with Customized Properties, which may be finished along with the design tokens strategy, is to go rather a lot more durable and use them for each main distinctive styling alternative on any given component.

Think about you’ve gotten a Card like this (simplified for demonstration sake, after all):

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


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

.card {
  --card-background: hsl(200deg 15% 73%);
  --card-border: 4px strong rgb(255 255 255 / 0.5);
  --card-padding: 2rem;
  --card-border-radius: 8px;
  --card-title-margin: 0 0 1rem 0;
  --card-title-border: 3px strong 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);

Somewhat 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 here 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 model youngsters of the variation with out having to re-write these selectors accurately.
  • I can now cross in styling overrides from the model attribute within the HTML for fast, one-off variations.

Much less verbose with fallbacks

Quite than declaring the Customized Properties on the prime 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 strong 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 strong rgba(0 0 0 / 0.2));

Now if one thing like --card-background does occur to get set, it is going to override the fallback worth right here. I don’t fully love this, as a result of it means components above .card can override it. That could be what you need, nevertheless 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 large gotcha although. Which means should 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 effective right here.

Too far?

Say you wished 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, nevertheless it’s seemingly too far. Colours are virtually definitely going to be declared on the root and left alone, so the good gotcha goes to make overriding the low-level little one properties inconceivable. Apart from, when you have a --color-1, you in all probability have a 2-9 (or extra) as effectively, which is all effectively and good as a result of there’s way more delicate design magic to a colour system than easy mathematical manipulations of colour components.

Deliverable design techniques?

There is no such thing as a doubt that Tailwind has loved a whole lot of recognition. 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 recognition is pushed by the truth that should you select from these pre-configured lessons, that the design finally ends up pretty good. You may’t go off the rails. You’re selecting from a restricted collection of values which were 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 title abstraction quite than apply styling on to the HTML component. However, it would get pleasure from a number of the similar constraints/limitations that make Tailwind and different atomic class approaches fascinating. In the event you 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 techniques 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 complete kitchen sink like this. For instance, Adam Argyle’s transition.model 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 excellent sense to you. However it’s an extra abstraction on prime of CSS. CSS information is shared by all, bespoke techniques information is barely 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.


Supply hyperlink

Leave a Reply