Styling Components: CSS Custom Properties


placeholder

This is a premium lesson.

Subscribe to get access to the entire course.

Sign up now

As an author, CSS variables are a great option if your components have a foundational style that a consumer shouldn’t be able to change. You may want to provide a few CSS variables to allow changes to properties like spacing, color, dimensions, etc. This limits the control that consumers have over how the components look, as they can only tweak properties you’ve explicitly provided variables for. This makes CSS variables great for theming, where a developer sets the foundational styles, and offer enough CSS variables to alter the look and feel.

Over-relying on CSS variables can become cumbersome for a couple of reasons. For complex components, you may have dozens of CSS variables.

You’ll need to ensure that your consumers can easily figure out what variables are available to them, vi