CSS Custom Properties: Variables for Your Stylesheet
CSS custom properties are variables for your design system. Define a value like --primary-color once on :root and reuse it everywhere. This is ideal for theming, like switching between light and dark modes.
Why it exists
Large stylesheets often repeat values like colors and spacing. Before custom properties, changing a single brand color could require a massive, error-prone find-and-replace operation. Custom properties were created to centralize these values, making stylesheets more maintainable and less repetitive.
The mental model
Think of custom properties as variables for your CSS. You declare a value with a meaningful name (like --primary-color: blue;) in one place, and then reference that variable (color: var(--primary-color);) wherever you need it. Change the variable's value, and every element using it updates automatically.
How it works
You declare a custom property by prefixing its name with two dashes, like --main-bg-color: #f0f0f0;. These properties are subject to the CSS cascade, meaning they are inherited by child elements. To make a property available globally, you define it inside the :root pseudo-class, which represents the document's root element. To use the property, you call the var() function, passing the property name as the argument, like background-color: var(--main-bg-color);.
When to use it
The primary use case is theming. You can define a full color palette, spacing scale, or font system as variables. This makes it trivial to implement features like light/dark mode by simply redefining the variable values. They also improve readability by replacing magic values like #333 with semantic names like --text-color-primary.
When not to use it
Custom properties cannot be used for property names, selectors, or inside media query definitions. For example, you cannot write var(--side): left; and then margin-var(--side): 10px;. They are strictly for property values. For logic that requires changing property names or selectors, you'll need JavaScript or a CSS preprocessor.
One canonical example
A simple light/dark mode theme. First, define default colors on the :root element: :root { --bg-color: #FFF; --text-color: #000; }. Then, define overrides for a dark theme, perhaps on a body attribute: body[data-theme='dark'] { --bg-color: #000; --text-color: #FFF; }. Finally, apply these variables to elements: body { background-color: var(--bg-color); color: var(--text-color); }. Toggling the data-theme attribute on the body will now switch the entire theme.
Interview question
What is the main advantage of using CSS custom properties over hardcoded values in a large stylesheet?
- a.They provide a way to define CSS selectors dynamically based on component state.
- b.They centralize common values, simplifying updates and facilitating theme changes like dark mode.Correct
- c.They allow for dynamic modification of CSS property names using JavaScript.
- d.They enable the creation of new, non-standard CSS properties for unique styling needs.
Why? this is the answer
CSS custom properties were created to centralize frequently repeated values, making stylesheets more maintainable and enabling easy theme switching. They cannot be used to modify property names, create new properties, or define selectors.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles