CSS Variables

What are CSS Variables?

CSS variables, also known as custom properties, allow developers to define reusable values in a stylesheet. Unlike fixed-value CSS properties, CSS variables can be dynamically used throughout the stylesheet, making code maintenance easier and design more consistent. CSS variables help simplify responsive design by allowing updates to be made in one place and automatically cascade to all elements that use them. Modern browsers support CSS variables, making them a valuable tool for front-end developers.

Benefits of Using CSS Variables

CSS variables bring multiple benefits to web styling:

• Dynamic Styling: CSS variables allow easy updates to styles. For example, a single change to a variable can switch an entire site to dark mode.
• Readability: Defining commonly used values as variables, like colors or font sizes, makes the code easier to read and maintain.
• Organization and Flexibility: Grouping related variables enhances code organization. For example, all theme-related variables like colors and fonts can be grouped together for easier editing.

How to Declare and Use CSS Variables

CSS variables are declared using two hyphens (--) as a prefix. The var() function is then used to access the variable:

/* Declaring a CSS variable */
:root {
  --primary-color: blue;
}

/* Using the CSS variable */
.element {
  color: var(--primary-color);
}

To apply a custom property value to specific elements, declare it within a selector:

/* Declare variable */
:root {
  --highlight-color: yellow;
}

/* Apply variable */
.highlight {
  background-color: var(--highlight-color);
}

Scope of CSS Variables

CSS variables have two scopes:

— Global Variables: Declared using the :root selector, they can be accessed anywhere in the document.‍

:root {
  --primary-color: blue;
}

Local Variables: Declared within specific selectors or rules, only accessible within that scope.

.container {
  --secondary-color: red;
}

Defining Custom Properties in CSS

Custom properties are defined with two dashes (--) and can be used with the var() function. By storing values like colors or font sizes as variables, updates are easier and code consistency is maintained.

For example, to define a color theme:

:root {
  --primary-color: #FF0000;
}

Using Custom Properties in the Root Element

To create a custom property globally, define it within the :root selector. These variables can be referenced throughout the CSS using var(). While custom properties themselves cannot be used directly in media or container queries, you can reference them with var().

:root {
  --primary-color: #FF0000;
}

/* Applying the variable */
.element {
  background-color: var(--primary-color);
}

Fallback Values for Custom Properties

Fallback values act as a backup when a custom property isn't set. If a variable is not set or invalid, the fallback is used.

:root {
  --primary-color: blue;
}

/* Using fallback */
.button {
  color: var(--primary-color, #0000FF);
}

If --primary-color is unset, the button color defaults to #0000FF.

Declaring Custom Properties in a CSS File

Custom properties are declared by prefixing the name with two dashes:

/* Global scope */
:root {
  --primary-color: blue;
}

/* Local scope */
section {
  --primary-color: red;
}

This allows reusability throughout the file, reducing code repetition and making the stylesheet easier to maintain.

Using Custom Properties for Background Color

Custom properties can be used to set background colors dynamically:

:root {
  --bg-color: #FF0000;
}

div {
  background-color: var(--bg-color);
}

You can also use color functions:

:root {
  --base-color: 255, 0, 0;
}

div {
  background-color: rgb(var(--base-color));
}

Naming Conventions for Custom Property Names

When naming custom properties:

• Use two dashes -- as a prefix.
• Remember, custom properties are case-sensitive (--color and --Color are different).

Stick to consistent naming for clarity and avoid conflicts.

Responsive Design with CSS Variables

Adapting Variables Based on Screen Size

To make designs responsive, use media queries to modify variable values based on screen size.

:root {
  --font-size: 16px;
}

@media screen and (max-width: 600px) {
  :root {
    --font-size: 14px;
  }
}

Variable Declarations for Different Screen Sizes

Declare variables in the global scope and use media queries to redefine them for different screen sizes.

/* Global variable */
:root {
  --font-size: 16px;
}

/* Media query for smaller screens */
@media screen and (max-width: 600px) {
  :root {
    --font-size: 14px;
  }
}

This allows for flexible and responsive designs across devices.