CSS Variables

CSS, or Cascading Style Sheets, is a style sheet language used for describing the look and formatting of a document written in HTML. One very useful feature in CSS is the use of variables, also known as custom properties.

What are CSS Variables?

CSS Variables are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation, e.g., --main-color: black;.

How to Declare CSS Variables?

Variables in CSS are declared within a CSS selector. In CSS the syntax of -- followed by a name is used to create a CSS variable. For example, to declare a variable named --main-bg-color, you would write:


:root {
  --main-bg-color: coral;
}

In this case, :root is a CSS pseudo-class that selects the root element of a document, typically the html element.

💡

:root The : in :root is a CSS pseudo-class selector. Pseudo-classes are used to define a special state of an element. In the case of :root, it selects the root element of a document. In HTML, the root element is always the html element.

In CSS, the colon : is used to denote pseudo-classes. Pseudo-classes are keywords added to selectors that specify a special state of the selected elements.

For instance, in the :root selector, the : is followed by the keyword root, which is a pseudo-class that matches the root of the document. In HTML documents, the root element is always the html element. So, :root is a way of targeting the html element, but with a higher specificity.

Pseudo-classes can also represent states of elements such as :hover, :focus, and :active, among others.

It's important to note that pseudo-classes are not the same as classes in HTML. They are not declared in the HTML. Instead, they are used within CSS selectors to apply styles to elements in certain states.

Using CSS Variables

Once a variable is declared, you can use it elsewhere in your CSS file with the var() function, like so:


body {
  background-color: var(--main-bg-color);
}

Scope and Inheritance of CSS Variables

CSS Variables follow the rules of cascading and inheritance in the same way as standard properties. If you declare a variable inside a selector, that variable can only be used within that selector or within the rules applied to the elements selected by that selector.

Advantages of Using CSS Variables

Reusability: Variables can be reused in many places in the stylesheets.

Maintainability: It's easier to maintain and manage code with variables. If we need to change the value, we only need to change it in one place.

Dynamic control: CSS Variables are accessible with JavaScript, which allows dynamic control over their values.

CSS Variables provide a powerful and flexible way to manage and manipulate your CSS. They are part of the future of how we write CSS and are rapidly becoming an essential tool for any front-end developer.

When to Use CSS Variables?

CSS Variables are particularly useful when you want to apply the same value in multiple places within your CSS. They are perfect for defining global values such as color schemes, font sizes, or spacing that need to be reused throughout the website.

When building a website with a consistent theme, CSS Variables can be a valuable tool. For example, if you are using a certain color in multiple areas on your site, you can define this color as a variable. If later you decide to change the color, you only need to update the variable, and the change will apply everywhere the variable is used.

Yes, it is quite common to define global styles, including CSS Variables, in a separate stylesheet. This global stylesheet is then linked to the HTML files that need to use these styles.

By defining the global styles in a separate file, you ensure consistency across your website or application. This also improves maintainability as you only need to modify the styles in one place if changes are needed.

When it comes to CSS Variables, they are typically declared in a global scope (using the :root selector) in this global stylesheet. This makes them accessible from any other CSS file in your project, regardless of the file's location in the directory structure.

Here's a simple example:


/* global.css */
:root {
  --main-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size: 16px;
}

And in another CSS file:


/* other.css */
body {
  background-color: var(--main-color);
  color: var(--secondary-color);
  font-size: var(--font-size);
}

In this example, global.css is the file where the CSS Variables are declared, and other.css is the file where the variables are used. As long as both files are linked in your HTML, the variables will be accessible in other.css.

In addition, CSS Variables are essential when you want to provide customization options or themes. By simply changing the values of the variables, you can easily switch between different themes.

Lastly, if you are planning to use JavaScript to manipulate your styles, CSS Variables are a must. They allow you to dynamically update your CSS from JavaScript, providing a powerful tool for creating interactive styles and themes.