{
"$type": "site.standard.document",
"content": {
"$type": "site.standard.content.markdown",
"text": "## So, What are CSS Variables?\n\nCSS 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.\n\n## Basic Usage\n\n```css\n:root {\n --primaryColour: hsla(4, 99%, 66%, 1);\n --backgroundColour: hsla(207, 100%, 96%, 1);\n}\n\nmain {\n background-color: var(--backgroundColour);\n}\n\nh1 {\n font-family: 'Atkinson Hyperlegible', sans-serif;\n letter-spacing: -0.5px;\n font-size: 3rem;\n color: var(--primaryColour);\n text-align: center;\n}\n```\n\nThere. Nice, quick example there - you can see this working below.\n\n<iframe height=\"300\" style=\"width: 100%;\" scrolling=\"no\" title=\"CSS Variables - Basic Usage\" src=\"https://codepen.io/dominickjay217/embed/abWMvGp?default-tab=&theme-id=dark\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n See the Pen <a href=\"https://codepen.io/dominickjay217/pen/abWMvGp\">\n CSS Variables - Basic Usage</a> by Dom Jay (<a href=\"https://codepen.io/dominickjay217\">@dominickjay217</a>)\n on <a href=\"https://codepen.io\">CodePen</a>.\n</iframe>\n\nNow we've got that up, let's see how this is put together, so let's break this down.\n\n<div class=\"pull-quote pull-quote--left\">\n\n 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\n\n</div>\n\nFirstly, the `:root` pseudo-class being used at the top of the example? That represents the root of the document tree (typically the `html` 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.\n\nSecond, 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.\n\nAfter setting up the custom properties in `:root`, they can then be used within any CSS selector by using them alongside the `var()` function, which is what is being shown in the `background-color` and `color` properties in the example above.\n\n## Fallbacks\n\nIf a custom property has been set, **but** is actually invalid or just hasn't been defined, for example, in both these cases;\n\n```css\n:root {\n --primaryColour: hsla(4, 99%, 66%, 1);\n --backgroundColour: hsla(207, 100%, 96%, 1);\n --secondaryColour: hsla(155, 61%, 51%, 1);\n --secondaryBackgroundColour: hsla(343, 6%, 21%, 1);\n}\n\nh2 {\n color: var(--thisDoesntExist, lightgreen);\n background-color: var(--thisDoesntExist, black);\n}\n```\n\nI've declared my `secondaryColour` and `secondaryBackgroundColour` in `:root`, but for my `h2` 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 `--thisDoesntExist`, another parameter is passed. **That** is our fallback colours.\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"CSS Variables - Basic Usage\" src=\"https://codepen.io/dominickjay217/embed/PomLaBp?default-tab=&theme-id=dark\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n See the Pen <a href=\"https://codepen.io/dominickjay217/pen/PomLaBp\">\n CSS Variables - Basic Usage</a> by Dom Jay (<a href=\"https://codepen.io/dominickjay217\">@dominickjay217</a>)\n on <a href=\"https://codepen.io\">CodePen</a>.\n</iframe>\n\n## Context Changing\n\nOne of the benefits of custom properties, is that they can be changed based on the context of the element it is assigned to.\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"CSS Variables - Basic Usage with Fallbacks\" src=\"https://codepen.io/dominickjay217/embed/eYWXPeL?default-tab=&theme-id=dark\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n See the Pen <a href=\"https://codepen.io/dominickjay217/pen/eYWXPeL\">\n CSS Variables - Basic Usage with Fallbacks</a> by Dom Jay (<a href=\"https://codepen.io/dominickjay217\">@dominickjay217</a>)\n on <a href=\"https://codepen.io\">CodePen</a>.\n</iframe>\n\nIn this example, the first h2 element we see uses the custom properties for `color` and `background-color`;\n\n```css\ncolor: var(--changeColour, hotpink);\nbackground-color: var(--changeBgColour, black);\n```\n\nBut, they are not defined yet so they use the fallback colours instead. On the second h2 element, we then use the `.add-styles` class to define these custom properties of `changeColour` and `changeBgColour`, 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](https://piccalil.li/tutorial/create-a-user-controlled-dark-or-light-mode/ 'A post by Andy Bell for User Controlled Dark or Light Mode') by Andy Bell, where it is being used within the `prefers-color-scheme` media query.\n\n## Using With Javascript\n\n<iframe height=\"350\" style=\"width: 100%;\" scrolling=\"no\" title=\"CSS Variables - Basic Usage with Fallbacks and Context Changing\" src=\"https://codepen.io/dominickjay217/embed/RwVmGQB?default-tab=&theme-id=dark\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n See the Pen <a href=\"https://codepen.io/dominickjay217/pen/RwVmGQB\">\n CSS Variables - Basic Usage with Fallbacks and Context Changing</a> by Dom Jay (<a href=\"https://codepen.io/dominickjay217\">@dominickjay217</a>)\n on <a href=\"https://codepen.io\">CodePen</a>.\n</iframe>\n\nIn this example, inline custom properties are set to allow new values for the `max-width` and `color` properities. While `max-width` uses a fallback of 550px, the `--maxWidth` value is not passed anywhere in the stylesheet, allowing it to differ from the example in the previous section. With the value of the `color` property, it is not using a fallback, or a different custom property. Instead, it is overwriting the `--primaryColour` value with a new color, and using CSS specificity to allow for the color to be changed.\n\n## Conclusion\n\nCSS 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.",
"version": "1.0"
},
"description": "The four behaviours that make custom properties more than just variables.",
"path": "/writing/level-up-your-styles-with-css-variables",
"publishedAt": "2021-08-16T23:00:00.000Z",
"site": "https://dominickjay.com",
"tags": [
"css",
"javascript"
],
"textContent": "So, What are CSS Variables?\n\nCSS 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.\n\nBasic Usage\n\nThere. Nice, quick example there - you can see this working below.\n\n See the Pen \n CSS Variables - Basic Usage by Dom Jay (@dominickjay217)\n on CodePen.\n\nNow we've got that up, let's see how this is put together, so let's break this down.\n\n 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\n\nFirstly, 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.\n\nSecond, 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.\n\nAfter 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.\n\nFallbacks\n\nIf a custom property has been set, but is actually invalid or just hasn't been defined, for example, in both these cases;\n\nI'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.\n\n See the Pen \n CSS Variables - Basic Usage by Dom Jay (@dominickjay217)\n on CodePen.\n\nContext Changing\n\nOne of the benefits of custom properties, is that they can be changed based on the context of the element it is assigned to.\n\n See the Pen \n CSS Variables - Basic Usage with Fallbacks by Dom Jay (@dominickjay217)\n on CodePen.\n\nIn this example, the first h2 element we see uses the custom properties for and ;\n\nBut, 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.\n\nUsing With Javascript\n\n See the Pen \n CSS Variables - Basic Usage with Fallbacks and Context Changing by Dom Jay (@dominickjay217)\n on CodePen.\n\nIn 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.\n\nConclusion\n\nCSS 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.",
"title": "Level Up Your Styles With CSS Variables"
}