Dynamic CSS with Custom Properties (aka CSS Variables)

Dynamic CSS with Custom Properties (aka CSS Variables)

3 hours, 54 minutes CC

Modern browsers ship with CSS Custom Properties, also known as “CSS variables”, a superpower that enables us to create reusable components without any JavaScript dependencies needed – using only vanilla CSS! Learn how to leverage Custom Properties to improve code reuse, maintainability, and downright enable possibilities that previously required large amounts of hard-to-maintain JavaScript and violated the separation of concerns. See practical examples of why CSS Custom Properties are a revolution in the way we write CSS!

This course and others like it are available as part of our Frontend Masters video subscription.

Published: November 9, 2021
Get Unlimited Access Now
Table of Contents

Introduction

Inheritance & Fallbacks

Invalid Values & Custom Properties Practice

Toggles, Responsive Design and Colors

Numbers, Strings, and Images

JavaScript

Wrapping Up