Introduction

• CSS Variables, also known as Custom Properties, is a powerful feature in CSS that allows you to store values and reuse them throughout your stylesheet. They help make your code more maintainable and flexible, especially in large projects. This tutorial will guide you through the concept of CSS Variables, how to use them, and best practices.

What are CSS Variables?📦

• Definition:

• CSS Variables are entities defined by CSS authors that contain specific values to be reused throughout a document. They are similar to variables in programming languages but are used for storing CSS values.

Naming Conventions:

• CSS Variables are defined with two hyphens (--) followed by the variable name.

• Example: --primary-color, --font-size.

• Syntax:

:root {
  --variable-name: value;
}
Example:
:root {
  --primary-color: #3498db;
  --font-size: 16px;
}

How to Use CSS Variables🌈

Defining Variables:

• CSS Variables are typically defined in the :root selector, which represents the document's root element. This makes the variables globally accessible throughout the CSS.

• Example:

:root {
  --main-bg-color: #f4f4f4;
  --main-text-color: #333;
}

Using Variables:

• Once defined, you can use CSS Variables anywhere in your stylesheet by referencing them with the var() function.

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

Example in Action:

<style>

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --font-size: 18px;
  }
  h1 {
    color: var(--primary-color);
    font-size: var(--font-size);
  }
  p {
    color: var(--secondary-color);
    font-size: var(--font-size);
  }
</style>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

• Explanation: The heading and paragraph use the same font size, and each uses different colors stored in variables. This ensures consistency and makes it easy to update the styles globally.

Why Use CSS Variables?🤔

Advantages:

• Reusability: Define a value once and reuse it throughout your stylesheet.

• Maintainability: Update a variable's value, and all instances where it's used will automatically update.

• Consistency: Ensures that your design remains consistent by using the same values across different elements.

Advanced Features of CSS Variables⚙️

Fallback Values:

• You can provide a fallback value for a CSS Variable in case the variable is not defined.

• Example:

h1 {
  color: var(--non-existent-variable, black);
}

• Explanation: If --non-existent-variable is not defined, the color will default to black.

Cascading and Inheritance:

• CSS Variables follow the normal rules of cascading and inheritance. This means they can be overridden or inherited by child elements.

.parent {
  --main-color: red;
}
.child {
  color: var(--main-color);
}

• Explanation: The child element inherits --main-color from its parent, applying the red color.

Scoped Variables:

• Variables can be scoped to specific elements, meaning they only apply within certain parts of the document.

• Example:

.theme-dark {
  --background-color: #333;
}
.theme-light {
  --background-color: #fff;
}
body {
  background-color: var(--background-color);
}