CSS Custom Properties (don't know that name? What about CSS Variables?)

In this talk, we'll walk through refactoring a standard set of vanilla CSS into code using custom properties.

This is a standard button style

You've probably seen and written this code hundreds of time. You've probably also been fancier with it...

.button {
    background-color: tomato;
    color: white;
    display: inline-block;
    padding: .5rem 1rem;
    border-radius: 3px;
    text-decoration: none;
}

This is a button style

Convert the styles to custom properties

Let's make the styles more flexible using custom properties

Set and Get your Custom Properties

We use the syntax --variable-name: variable-value to set a variable and var(--variable-name) to get the variable value. When we set values that we want to be globally accessed, we set them on the :root pseudo-element.

Set

        
        :root {
            --button-background: tomato;
            --button-foreground: white;
            --button-display: inline-block;
            --button-padding: .5rem 1rem;
            --button-corners: 3px;
            --button-decoration: none;
            --button-text-align: center;

        }

    

Get

.button-withvars {
    background-color: var(--button-background);
    color: var(--button-foreground);
    display: var(--button-display);
    padding: var(--button-padding);
    border-radius: var(--button-corners);
    text-decoration: var(--button-decoration);
    text-align: var(--button-text-align);

}

This is a button style

        
 <div class="container special">
     <a href="#" class="button-withvars">
    This is a button style   
     </a>
 </div>
        
    

    
.special {
    --button-background: lightblue;
    --button-foreground: #333;
    --button-display: block;
}
    
    

Use JS to set globally

Dark mode anyone?

Set them by JS

        
    
    
let darkModeToggle = document.querySelectorAll('.darkMode');

darkModeToggle.forEach(toggler => toggler.addEventListener('click', e => {
    e.preventDefault();
    document.documentElement.style.setProperty('--color', '#fff');
    document.documentElement.style.setProperty('--bg-color', '#333');
    document.documentElement.style.setProperty('--button-background', '#7d483e');
    document.documentElement.style.setProperty('--button-foreground', '#eee');

}));
        
    

Or Toggle the class and set your colors

JS

        
let darkModeToggle = document.querySelectorAll('.darkModeToggle');
let body = document.querySelector('body');

darkModeToggle.forEach(toggler => toggler.addEventListener('click', e => {
    e.preventDefault();
    body.classList.toggle('darkMode')
}));
        
    

CSS

        
.darkMode {
    --button-background: #7d483e;
    --button-foreground: #eee;    
    --color: #fff;
    --bg-color: #333;
}
        
        

Toggle Dark Mode