{"id":22240,"date":"2022-11-01T06:49:58","date_gmt":"2022-11-01T13:49:58","guid":{"rendered":"https:\/\/coderpad.io\/?p=22240"},"modified":"2023-06-05T13:56:50","modified_gmt":"2023-06-05T20:56:50","slug":"what-front-end-developers-need-to-know-about-css-variables","status":"publish","type":"post","link":"https:\/\/coderpad.io\/blog\/development\/what-front-end-developers-need-to-know-about-css-variables\/","title":{"rendered":"What Front-End Developers Need to Know about CSS Variables"},"content":{"rendered":"\n

CSS variables (also known as custom properties) enable you to declare reusable and dynamic CSS values.<\/p>\n\n\n\n

For a long time, a common challenge most web developers faced when working with CSS was the tendency to declare the same styles over and over again throughout the stylesheet. For example, on a website with a red color scheme, you might repeatedly declare the style color: red;<\/code> throughout your stylesheets.<\/p>\n\n\n\n

This can lead to issues in the maintainability of your CSS styles, such as having to edit all instances of the declaration color: red;<\/code> in your stylesheets when the color scheme is to be changed to purple. Enter CSS variables.<\/p>\n\n\n\n

CSS variables are author-defined property-value pairs, author-defined means they are not in the CSS specification but are defined by you, the web developer.<\/p>\n\n\n\n

They provide a way to define a CSS declaration once and then reuse that declaration throughout the stylesheet. This enables you to write more dynamic CSS and provides a more efficient and clean way of writing CSS.<\/p>\n\n\n\n

In this article, we’ll talk about CSS variables, what they are, how they work, and what you need to know to enable you to create more dynamic and reusable styles.<\/p>\n\n\n\n

Let’s dive in!<\/p>\n\n\n\n

What is a CSS variable?<\/h2>\n\n\n\n

In a programming language like JavaScript, a variable is defined as a way of storing information in the program\u2014a storage unit. Each variable acts like a container, where you pass a name that acts as the label on the container and assigns that name to a value that represents the contents in the container. Once a variable is assigned a value, you can then use the name of the variable to access its value anywhere down in the program. CSS variables operate in such a manner.<\/p>\n\n\n\n

To initialize a CSS variable, you define a property with a custom name of your choice and assign any valid CSS value to it.<\/p>\n\n\n\n

Syntax:<\/p>\n\n\n

element<\/span> {\n  --variable-name<\/span>: css-value;\t\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
CSS variables, like every CSS property, must be defined within the style block of a CSS selector.  <\/p>\n\n\n\n
Here, element<\/code> refers to any valid HTML element, the curly braces {}<\/code> refers to the declaration block of the element, --variable-name<\/code> and css-value<\/code> refer to the name of the CSS variable and the value you assign to it.<\/p>\n\n\n\n
Notice the double hyphens --<\/code> prefixed to the variable’s name. To define a CSS variable, you must prefix the double hyphens --<\/code> to the variable’s name (known as the custom property notation). This ensures you avoid accidental name overlapping of reserved CSS properties or other properties starting with a single hyphen – like -web-kit.<\/code><\/p>\n\n\n\n
Now, you can reuse the values in your CSS variables as the value in other properties across your CSS styles by passing the variable name to the CSS var()<\/code> function.<\/p>\n\n\n\n
For example:<\/p>\n\n\n
child-element<\/span> {\n  property<\/span>: var<\/span>(--variable-name);\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
The var()<\/code> function parses the variable and returns its value.<\/p>\n\n\n\n
Scope and the CSS Cascade<\/h3>\n\n\n\n
The CSS selector that defines a CSS variable determines how it cascades down through the stylesheet<\/a> and the child elements of that HTML element.<\/p>\n\n\n\n
In CSS, the cascade is a mechanism that determines how accessible a CSS style is to other parts of a stylesheet. It answers the questions: “from where can certain CSS styles be accessed?”, “from where can it not be accessed?”, “what can access it?” and “what can’t?”<\/p>\n\n\n\n
Each HTML element you reference in CSS through CSS selectors creates its scope: the space\/environment where the CSS properties and styles it defines can be accessed, which also determines how it accesses other CSS properties and styles via a process called cascading. <\/p>\n\n\n\n
Let’s look at an example to understand this better.<\/p>\n\n\n\n
When you define an HTML element within another element, like so:<\/p>\n\n\n
<outer-element<\/span>><\/span> \n<!-- also known as the \u201cparent element\u201d --><\/span>    \n  <inner-element<\/span>><\/span>\n      <!-- also known as the \u201cchild element\u201d --><\/span>\n  <\/innner-element<\/span>><\/span>    \n<\/outer-element<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
The inner element will be able to inherit and access some of the CSS styles defined in that of the outer element CSS ruleset and that of its parent elements. <\/p>\n\n\n\n
However, this doesn’t work in a backward-compatible manner. That is, the outer element will never have access to the CSS styles defined in the CSS ruleset of the inner element because CSS styles only cascade downwards in the stylesheet in a parent-to-child direction and never in the opposite direction. <\/p>\n\n\n\n
\n
\u2139\ufe0f This behavior also applies to variables in other programming languages and is called scoping<\/strong>.<\/p>\n<\/blockquote>\n\n\n\n
As a result, it is a common practice to define CSS variables in the :root<\/code> pseudo-class.<\/p>\n\n\n\n
\n
\u2139\ufe0f MDN<\/a> defines CSS pseudo-class as a keyword added to a selector that specifies the selected element(s) state. For example, the pseudo-class :hover<\/code><\/a>, signifies that a user’s pointer is hovering over an element.<\/p>\n<\/blockquote>\n\n\n\n
The :root<\/code> pseudo-class represents the element at the document’s root in the DOM<\/a>. In HTML, this is usually the <html><\/code> element.<\/p>\n\n\n\n
This means the syntax:<\/p>\n\n\n
:root<\/span> {\n  --font-size<\/span>: 16px<\/span>;\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Is the same as writing: <\/p>\n\n\n
html<\/span> {\n  --font-size<\/span>: 16px<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
However, this doesn’t always have to be the case, as you might want to limit the scope of your CSS variables.<\/p>\n\n\n\n
In such cases, you can specify CSS variables on the style block of specific HTML elements to which you wish them to be accessible. <\/p>\n\n\n\n
For example:<\/p>\n\n\n
nav<\/span> {\n  --font-size<\/span>: 10px<\/span>; \n\/* equals to two times the value of the --font-size variable - 20px *\/<\/span>\n  font-size<\/span>: calc<\/span>(var(--font-size * 2<\/span>)) \n}\n\nnav<\/span> a<\/span> {\n\/* equals to the value of the --font-size variable - 10px *\/<\/span>\n  font-size<\/span>: var<\/span>(--font-size) \n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
In the code block above, the CSS variable --font-size<\/code> is defined on the navigation element \u2014 nav<\/code> and will only be accessible within it and its child elements.<\/p>\n\n\n\n
Assigning CSS variables to other CSS variables<\/h3>\n\n\n\n
You can pass a CSS variable as the value for another CSS variable using the var()<\/code> function. The CSS variable will then be parsed by the var()<\/code> function to represent its value.<\/p>\n\n\n\n
For example:<\/p>\n\n\n
:root {\n  --red: #a24e34;<\/span>\n  --green: #01f3e6;<\/span>\n  --yellow: #f0e765;<\/span>\n\n  --danger: var<\/span>(--red); \/\/ will transpile back to the value of the --red variable.<\/span>\n  --success: var<\/span>(--green);\n  --warning: var<\/span>(--yellow);\n}<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
The added benefit here is readability since you now communicate the intent or role of the variable. This can help you write variable names that are more readable, descriptive, and understandable.<\/p>\n\n\n\n
Fallback values<\/h3>\n\n\n\n
When using CSS variables, you might reference a variable that can not be accessed in that part of the stylesheet due to the CSS cascade or was just not defined. Using the var<\/code> function, you can specify fallback values that will be used in place of a CSS variable if it is inaccessible, contains invalid values, or is undefined.<\/p>\n\n\n\n
The var()<\/code> function takes two arguments:<\/p>\n\n\n
var( <css-variable-name<\/span>><\/span>, <declaration-value<\/span>><\/span>)<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Where:<\/p>\n\n\n\n
The difference is that :root<\/code> has a much higher specificity<\/a>. It’s simply a way of setting CSS variables on a selector that’s as high up in the document tree as possible. This way, they are made globally accessible across your CSS file and cascade to every element on the page.<\/p>\n\n\n\n