Common mistakes & troubleshooting CSS variables 관련

How to use CSS variables like a pro

---

Build four simple projects to learn how CSS variables can help you write reusable, elegant code and streamline the way you build websites.

• Missing fallbacks for older browsers
• Variables with media queries
• Variables don’t work in certain properties (e.g.,display, z-index)

---

How to use CSS variables like a pro

Build four simple projects to learn how CSS variables can help you write reusable, elegant code and streamline the way you build websites.

Here are some common mistakes with CSS variables and how to fix them:

---

Missing fallbacks for older browsers

Some older browsers, like IE11, do not support CSS variables, which can cause styling issues if a fallback is not provided. A common mistake is using var(--color-primary) without specifying an alternative. To prevent this, always include a fallback value inside var(), such as var(--color-primary, #3498db), ensuring that a default color is applied if the variable is unavailable.

---

Variables with media queries

CSS variables cannot be used directly in media queries, as they are not evaluated in the same way as standard values. For example, defining a variable like --breakpoint-mobile: 600px in :root and attempting to use it inside @media (max-width: var(--breakpoint-mobile)) will not work. Instead, media queries require fixed values, so it’s best to use predefined breakpoints directly, such as @media (max-width: 600px), to ensure proper functionality.

---

Variables don’t work in certain properties (e.g.,display, z-index)

CSS variables don’t work in all properties, especially those that require integer values like z-index or display.

:root {
  --display-mode: flex;
}

.container {
  display: var(--display-mode); /* Won't work */
}