How to set up site theming with CSS variables


CSS Custom Properties, commonly known as CSS variables, are now supported by all major modern browsers. This means that for projects that aren't burdened by having to support legacy browsers such as Internet Explorer, CSS variables can be considered – for all intents and purposes – safe to use.

Many developers already use variables with preprocessors such as Sass or Less as a means of reducing code repetition. Native CSS variables work in largely the same way, but don't require any additional build step, cascade like a regular CSS property, and most importantly, are available at runtime. (To keep your site running smoothly, be sure you've chosen the right web hosting service.) 

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Luke is a web developer from Sheffield, who is all about scalable and efficient frontend architecture.