7 Makes use of for CSS Customized Properties

Customized properties (often known as CSS variables) enable us to retailer property values for re-use in our stylesheets. Should you’re comparatively new to them, you would possibly surprise if you would possibly use them over and above preprocessor variables (if certainly you utilize a preprocessor). I’m utilizing customized properties so much in my workflow nowadays, and thought I’d collate a number of the use instances right here.

This isn’t an in-depth information to how customized properties work, so if you happen to want a primer I like to recommend the next assets:

Color capabilities

Customized properties don’t simply characterize total property values – they can be utilized to retailer partial values too. A generally cited use case is in CSS color capabilities. HSLA lends itself notably properly to customized properties, permitting us as builders an unprecedented stage of management relating to mixing colors.

.some-element {
  background-color: hsla(
    var(--h, 120),
    var(--s, 50),
    var(--l, 50),
    var(--a, 1)
  );
}

.some-element.darker {
  --l: 20;
}

We will additionally do some very cool issues like calculate complementary colors. This text I wrote final yr is a way more in-depth information to color manipulation with customized properties, and Sara Soueidan has an incredible article on the topic too.

Shorthand properties

Should you’re utilizing a shorthand property corresponding to animation, and it’s essential change one worth for a unique aspect, then writing out the entire property once more might be error-prone and provides an additional burden of upkeep. Utilizing customized properties we will alter a single worth within the shorthand property very simply:

.some-element {
  animation: var(--animationName, pulse) var(--duration, 2000ms) ease-in-out
    infinite;
}

.some-element.quicker {
  --duration: 500ms;
}

.some-element.shaking {
  --animationName: shake;
}

Repeated values

Suppose we’ve a component that has a constant worth for its prime padding, however the identical worth for all the opposite sides. Writing the next could possibly be a bit tedious, particularly if we need to alter the padding values:

.some-element {
  padding: 150px 20px 20px 20px;
}

@media (min-width: 50em) {
  .some-element {
    padding: 150px 60px 60px 60px;
  }
}

Utilizing customized properties means we’ve only one place to regulate that padding. Even higher, if it’s a normal worth that’s used all through the positioning then we might declare it in a variable partial, config file or our website’s design tokens.

:root {
  --pad: 20px;
}

@media (min-width: 50em) {
  :root {
    --pad: 60px;
  }
}

.some-element {
  padding: 150px var(--pad) var(--pad) var(--pad);
}

Advanced calculations

Customized properties might be actually useful for storing calculated values (from the calc() operate), which themselves may even be calculated from different customized properties. One instance is calculating complementary colors, as talked about earlier. One other is if you need to calculate the inverse of a property. I wrote an article for CSS Methods a short while in the past on calculating the reverse of an easing curve with customized properties.

I usually use customized properties with clip-path if I have to calculate a path relative to a different, or relative to identified variables. The next code from a current demo calculates the clip path factors for 2 pseudo parts to present the looks of a component being bisected.

.aspect {
  --top: 20%;
  --bottom: 80%;
  --gap: 1rem;
  --offset: calc(var(--gap) / 2);
}

.aspect::earlier than {
  clip-path: polygon(
    calc(var(--top) + var(--offset)) 0,
    100% 0,
    100% 100%,
    calc(var(--bottom) + var(--offset)) 100%
  );
}

.aspect::after {
  clip-path: polygon(
    calc(var(--top) - var(--offset)) 0,
    calc(var(--bottom) - var(--offset)) 100%,
    0 100%,
    0 0
  );
}

See the Pen His Darkish Supplies TV sequence brand with CSS by Michelle Barker
(@michellebarker) on CodePen.

Staggered animations

If we need to stagger animations for a variety of youngster parts, we will elegantly set the animation-delay on each by merely defining the customized property because the aspect’s index:

.aspect {
  --delay: calc(var(--i, 0) * 500ms);
  animation: fadeIn 1000ms var(--delay, 0ms);
}

.aspect:nth-child(2) {
  --i: 2;
}

.aspect:nth-child(3) {
  --i: 3;
}

See the Pen
Staggered animation with customized properties by Michelle Barker (@michellebarker)
on CodePen.

Sadly we presently must assign the variable explicitly, which could possibly be an issue if we’ve an indeterminate variety of youngsters. Splitting JS is a superb Javascript library that takes care of that by assigning the aspect’s index as a variable, and may be very helpful for this sort of staggered animation. However it could be nice to not have to make use of JS!

Adam Argyle has lately submitted a proposal for 2 new CSS capabilities, sibling-count() and sibling-index(), which might be a game-changer, making an entire lot of recent issues attainable with CSS. They’re nowhere near being adopted by any browsers at this level, however it could be an extremely highly effective addition, so one to control.

Responsive grids

I’ve written about it on this weblog earlier than, however customized properties may help make advanced Grid layouts simpler to handle. Suppose we’ve an 8-column grid, which we need to change to a 12-column grid at a selected breakpoint:

:root {
  --noOfColumns: 8;
}

@media (min-width: 60em) {
  :root {
    --noOfColumns: 12;
  }
}

.grid {
  show: grid;
  grid-template-columns: repeat(var(--noOfColumns), 1fr);
}

We don’t want to put in writing your complete property worth each time we need to replace the variety of columns – we might use customized properties. This can be a comparatively easy instance, nevertheless it is likely to be far more helpful if we’ve a extra advanced grid. And the method might apply to issues like observe dimension or merchandise placement too.

Vendor prefixes

Some properties (like clip-path) nonetheless require vendor prefixes in some browsers – though fortunately that quantity goes down. If it’s essential write a vendor prefix and you then need to change the property worth, it’s essential be sure to change it on the prefixed property too. With customized properties we might as a substitute write:

.some-element {
  --clip: polygon(0 0, 100% 0, 50% 100%, 0 100%);

  -webkit-clip-path: var(--clip);
  clip-path: var(--clip);
}

Now we solely have one place we have to change it.

Conclusion

These are removed from the one makes use of for customized properties, however they’re one which I sometimes discover myself reaching for inside my workflow, and may help make your code extra environment friendly and maintainable. Little doubt you’ll uncover lots extra makes use of of your individual!