Adding CSS Variables to Your First Component

This is a premium lesson.

Subscribe to get access to the entire course.

Now that we’ve covered the importance of variables and how we should name them, let’s go ahead and refactor the checkbox component to use variables.

We’ll go through the first couple together, and then I’ll leave it with you to complete the rest.

Here’s the structure we created in the previous lesson:

{element}-{sub-element}-{category}-{property}-{variant}-{state}

So we’ve spent some time with CSS variables. We’ve learned what they are, why they’re useful, and how we can use them. It’s time to go back to our component and replace the necessary CSS values with variables.

It’s been a while, but it’s time for you to go ahead and reopen your long-running component library repo.

Start by creating a new style.css file in the code directory.

Next, copy all of the styles for the checkbox and paste them into style.css and comment them out, we’ll get back to these a little later.

Jump back into the index.html file and import the new CSS file into your HTML

<link r```