How to use global variables in CSS- Modules ?

Using global variables in CSS is primarily achieved by defining a set of global CSS custom properties (also known as CSS variables) using the :root pseudo-class. These variables can store color values, font sizes, or any other CSS values, ensuring design consistency across the entire website or application and simplifying maintenance.

Step 1: Define Global Variables

At the top of the CSS file, define global variables within the :root selector. The :root selector targets the root element of the document tree, such as the tag in HTML.

css
:root {
  --main-color: #4CAF50; /* Theme color */
  --accent-color: #FFC107; /* Accent color */
  --font-family: 'Arial', sans-serif; /* Font */
  --padding: 10px; /* Padding */
}

Step 2: Use Global Variables

In any part of the CSS file, you can reference these global variables using the var() function. This enables reusing the same values in multiple places, and if updates are required, you only need to modify them once in the :root.

css
body {
  font-family: var(--font-family);
  color: var(--main-color);
}

button {
  background-color: var(--accent-color);
  padding: var(--padding);
  border: none;
}

.container {
  padding: var(--padding);
}

Example: Practical Application

Suppose we are developing a website and decide to change the theme color and accent color. Without CSS variables, we would need to manually search and replace every color value in the CSS file, which is time-consuming and error-prone. However, with CSS variables, we only need to modify the color values in the :root:

css
:root {
  --main-color: #3498DB; /* New theme color */
  --accent-color: #9B59B6; /* New accent color */
}

Modifying these values updates all references automatically, making style maintenance highly efficient and straightforward.

Summary

Using CSS variables offers a powerful approach for creating maintainable, scalable, and reusable styles. This is especially beneficial in large projects or component libraries, as it significantly reduces code duplication and enhances style consistency. Furthermore, it simplifies dynamic changes to themes or styles, such as implementing dark mode.