Super Simple Start to css variables
Photo by Harli Marten
How to get started using css variables
If you're like me, you're a little late to the game on CSS variables. Maybe you (like me) have been enjoying using real JavaScript variables with CSS-in-JS. But darn it, smart people I know and respect say it's amazing and I should just embrace this relatively newish piece of the platform.
When I'm getting started with something, I really appreciate getting a super simple start to it, so here you go.
I heard "CSS Variables" and "CSS Custom Properties" thrown around a bit in conversation and didn't really understand the difference. Turns out they're the same thing 🤦♂️ The technical term is "CSS Custom Properties", but it's often called "CSS Variables".
Ok, so here you go. Your quick-start to custom properties:
1<html>2 <style>3 :root {4 --color: blue;5 }6 .my-text {7 color: var(--color);8 }9 </style>10 <body>11 <div class="my-text">This will be blue</div>12 </body>13</html>
:root
is a pseudo-class that matches <html>
. Actually, it's exactly the same
as if we had used html
in place of :root
(except it has higher specificity).
Just like everything else in CSS, you can scope your custom properties to
sections of the document. So, rather than :root
, we could use regular
selectors:
1<html>2 <style>3 .blue-text {4 --color: blue;5 }6 .red-text {7 --color: red;8 }9 .my-text {10 color: var(--color);11 }12 </style>13 <body>14 <div class="blue-text">15 <div class="my-text">This will be blue</div>16 </div>17 <div class="red-text">18 <div class="my-text">This will be red</div>19 </div>20 </body>21</html>
The cascade also applies here:
1<html>2 <style>3 .blue-text {4 --color: blue;5 }6 .red-text {7 --color: red;8 }9 .my-text {10 color: var(--color);11 }12 </style>13 <body>14 <div class="blue-text">15 <div class="my-text">This will be blue</div>16 <div class="red-text">17 <div class="my-text">18 This will be red (even though it's within the blue-text div, the19 red-text is more specific).20 </div>21 </div>22 </div>23 </body>24</html>
And you can even change the custom property value using JavaScript:
1<html>2 <style>3 .blue-text {4 --color: blue;5 }6 .red-text {7 --color: red;8 }9 .my-text {10 color: var(--color);11 }12 </style>13 <body>14 <div class="blue-text">15 <div class="my-text">16 This will be green (because the JS will change the color property)17 </div>18 <div class="red-text">19 <div class="my-text">20 This will be red (even though it's within the blue-text div, the21 red-text is more specific).22 </div>23 </div>24 </div>25 <script>26 const blueTextDiv = document.querySelector('.blue-text')27 blueTextDiv.style.setProperty('--color', 'green')28 </script>29 </body>30</html>
So there you go, that's your super simple start. I didn't really talk about why you'd want to do this. I'll let you keep Googling to figure that out (or just let your imagination run wild). Hopefully this helps give you a quick intro to the idea though! Good luck!
P.S. Are you interested in finding out what this is like in React? Check this out: Use CSS Variables instead of React Context.