Web News

CSS Variables - What Are They & How to Use Them

November 24, 2022
November 30, 2022
Episode Number:

CSS variables are a powerful vanilla CSS feature that you need to start using on your next project. You don't need any frameworks, plugins, or other tooling to get started. When used correctly, they can be a huge boost to your project's organizing and productivity - helping keep things readable and easily maintained. This week Matt & Mike discussed what CSS variables are and how to get started using them in your next project.


Also available on...
...and many more, check your podcast app!

Who’s in This Episode?

Show Notes

Topics & Timestamps

This episode is closely related to one of our written guides, which you can find here

  • What are CSS variables? | 00:04:51
    - custom properties
    - set, store, and use values
  • What are CSS variables used for? | 00:07:46
    - theming websites
    - organizing color schemes
    - innovative uses (ie responsivity)
  • How to set up and use a CSS variable | 00:16:11
    - valid variable names
    - local declaration
    - global declaration
    - var() function
  • Example breakdowns | 00:42:33
    - Example 1 - Global Scope
    - Example 2 - Local Scope
    - Example 3 - Local & Global