CSS Variables — What You Need to Know.
One week down, nine to go… Closing week 1 of coding bootcamp I had to present at Hacker You’s weekly Show-and-Tell mixer. Each of us had to find a topic in web development that inspired us and I came across CSS Variables. As an aspiring front-end developer, when I heard about these babies I wondered why I had never heard of them before? The ability to customize CSS properties so you never have to type out that hex code or font-family ever again had me shook! The only variables we ever touched on were used via pre-processor. Using a pre-processor was a little tricky and required a bit of extra time to get the hang of it. But CSS variables is purely syntax!
What are CSS Variables?
CSS variables are more accurately described as custom properties. They are useful in preventing DRY — Don’t Repeat Yourself code. With the ability to change a property once and have that change made all over your style sheet is magical! But then why don’t we take advantage of this tool?
caniuse CSS Variables?
As of 2017, caniuse.com reported 77.16% browser support for CSS Variables. CSS Variables are only really compatible with the latest versions of browsers and not at all compatible with IE, so that is something to keep in mind when using them.
CSS Variables Solve a Problem.
CSS can get pretty messy, when you want to revise a consistent property in your CSS you have to manually change the value in each element. Say you want to change the font-size in each of your paragraphs from 16px to 20px. This change needs to be made all over you style sheet. Especially if it’s a big project you’ll probably have to make that same change 10–20 times! Using the cmd/ctrl F function only gets you so far, as it is case sensitive. If you’re using camel case better hope you’re an excellent typer because there are tons of opportunities for error and cmd/ctrl F won’t spot it! But! If your variable is defined at the top of your page you’ll only have to make that edit once!
Syntax.
The syntax is super simple and easy to remember. Define/name the property you wish to modify using the pseudo-class selector :root.
Never again will you have extra tabs opened up for remembering all the different types of fonts and hex values you’re working with.
Limitations.
CSS Variables are a powerful tool for web-developers but there are some limitations. Aside from browser compatibility, most developers use variables with a pre-processor. Using a pre-processor can assign multiple properties to one variable. This process is possible with mixins. CSS variables only customize a single property. With mixins, say we have an H1 with the applied font-family, font-size, color, and centering. Using a pre-processor we can assign these 4 properties to H1 using one variable. This is not yet possible with CSS Variables.
In Short.
Anyone who knows HTML & CSS should be taking advantage of this function. CSS variables are easy to understand whether you’re just beginning your journey as a developer or practising out in the wild. CSS Variables are a powerful tool made to make developers lives easier, and I encourage you all to have fun with them!
Resources.
CSS Custom Properties for Cascading Variables Module Level 1
