DEV Community

Cover image for Using Custom Properties to ⚡️Supercharge your CSS⚡️
Dan Fockler
Dan Fockler

Posted on


Using Custom Properties to ⚡️Supercharge your CSS⚡️

If you've been doing web development for a while you've probably heard of SASS. It lets you do cool things like nesting rulesets, and using mixins. What you may not have realized is that plain old CSS now has one of the most obvious features of SASS, ✨VARIABLES✨! In CSS parlance these are called custom properties.

We know why variables in SASS are useful, but why would they be useful in regular CSS? Let's show some examples.


Imagine you need to show each of your users a custom color on their profile page, (ala Twitter).

If you use SASS you'll need to generate a custom CSS file for each of your users, YUCK. 'Oh I'll just use Javascript', you say. That's sustainable if you have a few elements that need to change color, but let's say you have lots of CSS! With custom properties you can do this in a snap.

/* user-theme.css */
:root {
  --custom-color: #FF00FF;

/* main-theme.css */
.title {
  color: var(--custom-color);

.main-header {
  background-color: var(--custom-color);
/* ... lots more css in here */

Custom properties let you generate a tiny CSS file that can easily allow you to dramatically change the style of your page with minimal extra work.

Interactive Styling

Another wonderful thing you can do with custom properties, is allowing Javascript to easily modify page styles. Say, adding different color themes or changing text sizes. This becomes trivial using custom properties.

/* main.css */
:root {
  --body-font-size: 16px;

body {
  font-size: var(--body-font-size);
<!-- Some HTML input -->
<input type="range" onchange="changeFontSize(value)">
// Javascript code
function changeFontSize(value) {"--body-font-size", `${value}px`);

Some things you may notice.

  • Custom properties must have a variable name that starts with -- per the spec, and to reference them you use the var() method in your CSS.

  • The :root element is used in the examples. You can also scope custom properties to a ruleset and they will be scoped based on the cascade, just like other CSS properties.

  • Setting custom properties on the :root element will let you use the properties in all of your CSS.

  • IE decided to sit this one out and does not support custom properties, but all other browsers, including Edge, do.

Custom properties are a really cool feature for designing dynamic themes and styles using basic CSS and JS. Happy styling! 💇

Top comments (2)

mkenzo_8 profile image

Yup! Since I discovered CSS variables I use them everywhere!!

nuxodin profile image
Tobias Buschor

CSS variables are great!
Therefor i wrote a polyfill for IE11:


11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!