What are variables in CSS?

Posted by

  


Variables in CSS are a powerful tool that allows you to write clearer, reusable, and easier-to-maintain style sheets. Introduced in the CSS3 specification, variables can contain any CSS value (colors, sizes, margins, etc.) and can be reused throughout the style sheet.

In this article, we'll see:

  • What are variables
  • How to declare them
  • How to use them
  • Practical examples
  • Advantages and best practices
🔗 Do you like Techelopment? Check out the site for all the details!

✅ What are variables?

Variables are CSS properties that begin with -- and are declared within a selector, usually :root to make them global.

Basic Syntax

:root {
  --primary-color: #3498db;
  --font-size-large: 1.5rem;
}

In this example:

  • --primary-color contains a color
  • --font-size-large contains a font size

🛠️ How to use them

To use a variable, use the CSS function var().

h1 {
  color: var(--primary-color);
  font-size: var(--font-size-large);
}

🎯 Why use variables

  • Reuse: Define once, use everywhere.
  • Maintenance: Changing a value in one place affects the entire site.
  • Themes: Perfect for easily changing the interface style (e.g., light/dark mode).
  • Organization: Improves the readability and structure of CSS.

🔁 Simple example (to understand the basics)

:root {
  --main-bg: #ffffff;
  --main-text: #333333; 
  --accent: #ff6b6b; 
  --padding: 1rem;
}

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

button { 
  background-color: var(--accent); 
  color: var(--main-bg); 
  padding: calc(var(--padding) / 2);
}

💡 Advanced Example (to take advantage of reuse)

In this example, we'll see how to use CSS variables to centralize colors, spacing, and typography, improving maintainability and design consistency.

🎨 1. Global Variable Declaration

:root {
  --primary-color: #4CAF50;
  --secondary-color: #ffffff;
  --font-family-base: 'Segoe UI', sans-serif;
  --font-size-base: 16px;
  --spacing-unit: 1rem;
  --border-radius: 8px;
}

🧱 2. Using variables in the general layout

body { 
  font-family: var(--font-family-base); 
  font-size: var(--font-size-base); 
  padding: var(--spacing-unit); 
  background-color: var(--secondary-color); 
  color: var(--primary-color);
}

🔘 3. Style buttons with variables

.button { 
  background-color: var(--primary-color); 
  color: var(--secondary-color); 
  padding: calc(var(--spacing-unit) / 2) var(--spacing-unit); 
  border: none; 
  border-radius: var(--border-radius); 
  cursor: pointer;
}

🏷️ 4. Titles consistent with the theme

h1, h2, h3 { 
  font-family: var(--font-family-base); 
  color: var(--primary-color); 
  margin-bottom: var(--spacing-unit);
}

🎯 5. Practical Benefits

  • A single point of control for colors, spacing, and fonts
  • Cleaner and more readable code
  • Easy to update: change one variable, and the entire site updates

💡 CSS variables are ideal for creating consistent themes, making the design scalable, and improving project maintenance.

 

⚠️ Fallback (fallback value)

If the variable is not defined, you can specify a fallback value:

color: var(--link-color, blue);

In this case, if --link-color is not defined, blue will be used.


💡 Best Practices

  • Use :root for global declarations.
    • :root { 
  --font-base: 16px; 
  --line-height: 1.6; 
  --spacing-unit: 1rem; 
  --border-radius: 8px;
}
    body { 
  font-size: var(--font-base); 
  line-height: var(--line-height); 
  padding: var(--spacing-unit);
}

.card { 
  border-radius: var(--border-radius);
}
  • Organize variables by type (colors, spacing, typography, etc.).
  • Comment variables if necessary for clarity.
  • Avoid overuse: don't create unnecessary or one-time variables.

👀 Browser Compatibility

Variables are supported by most modern browsers, including:

  • Chrome
  • Firefox
  • Safari
  • Edge

🧩 Conclusion

Variables make CSS much more powerful and flexible. By using them correctly, you can improve the efficiency of your front-end development and simplify the management of your styles.

Start with small variables like colors and padding, and gradually extend their use to typography, animations, and layout!



Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment