Level Up Your Styles With CSS Variables

So, What are CSS Variables? CSS variables - otherwise known as custom properties - are specific values that can be reused throughout a document, similar to how variables are used in other programming languages. Let's see a quick example and break the parts down. Basic Usage There. Nice, quick example there - you can see this working below. See the Pen CSS Variables - Basic Usage by Dom Jay (@dominickjay217) on CodePen. Now we've got that up, let's see how this is put together, so let's break this down. Similar to class names and IDs, there's no specific naming convention, so the world is your oyster and there are lots of different opinions on the best way Firstly, the pseudo-class being used at the top of the example? That represents the root of the document tree (typically the element) and is used to define custom properties in a way that will allow them to be used globally across your site. Neat! They can be defined elsewhere, but let's not go into that right now. Second, CSS custom properties are always prefixed with a . Similar to class names and IDs, there's no specific naming convention, so the world is your oyster and there are lots of different opinions on the best way. After setting up the custom properties in , they can then be used within any CSS selector by using them alongside the function, which is what is being shown in the and properties in the example above. Fallbacks If a custom property has been set, but is actually invalid or just hasn't been defined, for example, in both these cases; I've declared my and in , but for my element I've used a different custom property name (aptly titled "This Doesn't Exist" for obvious reasons). Notice, that rather the function closing after , another parameter is passed. That is our fallback colours. See the Pen CSS Variables - Basic Usage by Dom Jay (@dominickjay217) on CodePen. Context Changing One of the benefits of custom properties, is that they can be changed based on the context of the element it is assigned to. See the Pen CSS Variables - Basic Usage with Fallbacks by Dom Jay (@dominickjay217) on CodePen. In this example, the first h2 element we see uses the custom properties for and ; But, they are not defined yet so they use the fallback colours instead. On the second h2 element, we then use the class to define these custom properties of and , which in turn, allows this element to fullfil where they were originally being used, rather than using the fallback. Clever, eh? A great example I've seen of this is this post by Andy Bell, where it is being used within the media query. Using With Javascript See the Pen CSS Variables - Basic Usage with Fallbacks and Context Changing by Dom Jay (@dominickjay217) on CodePen. In this example, inline custom properties are set to allow new values for the and properities. While uses a fallback of 550px, the value is not passed anywhere in the stylesheet, allowing it to differ from the example in the previous section. With the value of the property, it is not using a fallback, or a different custom property. Instead, it is overwriting the value with a new color, and using CSS specificity to allow for the color to be changed. Conclusion CSS custom properties are a great way to keep your styles controlled and consistent (because who wants to rely on a Find and Replace when a new branding colour comes along), and allows for less CSS to be written overall.