You\u2019re probably already at least a little familiar with CSS variables. If not, here\u2019s a two-second overview: they are really called custom properties, you set them in declaration blocks like But are we using them to their full potential? Do we fall into old habits and overlook opportunities where variables could significantly reduce the amount of code we write?<\/p>\n\n\n\n\n\n\n\n This article was prompted by a recent tweet I made about using CSS variables to create dynamic animation behavior.<\/p>\n\n\n\n CSS variables are awesome, right? But scope power is often overlooked. For example, take this demo, 3 different animations but only 1 animation defined 💪 That means dynamic animations 😎 https:\/\/t.co\/VN02NlC4G8<\/a> via @CodePen<\/a> #CSS<\/a> #animation<\/a> #webdev<\/a> #webdesign<\/a> #coding<\/a> pic.twitter.com\/ig8baxr7F3<\/a><\/p> \u2014 Jhey @ NodeConfEU 2019 📍🇮🇪⌨️ (@jh3yy) November 5, 2019<\/a><\/p> <\/p><\/blockquote>\n\n\n\n Let\u2019s look at a couple of instances where CSS variables can be used to do some pretty cool things that we may not have considered.<\/p>\n\n\n The simplest and likely most common example would be scoped colors. And what\u2019s our favorite component to use with color? The button. 😅 <\/p>\n\n\n\n Consider the standard setup of primary and secondary buttons. Let\u2019s start with some basic markup that uses a BEM syntax<\/a>.<\/p>\n\n\n\n Traditionally, we might do something like this to style them up:<\/p>\n\n\n\n--size: 1em<\/code> and use them as values like font-size: var(--size);<\/code>, they differ from preprocessor variables<\/a> (e.g. they cascade), and here\u2019s a guide<\/a> with way more information. <\/p>\n\n\n\nBasic scoping wins<\/h3>\n\n\n
<button class=\"button button--primary\">Primary<\/button>\n<button class=\"button button--secondary\">Secondary<\/button><\/code><\/pre>\n\n\n\n.button {\n padding: 1rem 1.25rem;\n color: #fff;\n font-weight: bold;\n font-size: 1.25rem;\n margin: 4px;\n transition: background 0.1s ease;\n}\n\n.button--primary {\n background: hsl(233, 100%, 50%);\n outline-color: hsl(233, 100%, 80%);\n}\n\n.button--primary:hover {\n background: hsl(233, 100%, 40%);\n}\n\n.button--primary:active {\n background: hsl(233, 100%, 30%);\n}\n\n.button--secondary {\n background: hsl(200, 100%, 50%);\n outline-color: hsl(200, 100%, 80%);\n}\n\n.button--secondary:hover {\n background: hsl(200, 100%, 40%);\n}\n\n.button--secondary:active {\n background: hsl(200, 100%, 30%);\n}<\/code><\/pre>\n\n\n\n