CSS custom properties (variables) can be combined with media queries to create adaptive and maintainable responsive designs. By redefining variable values inside different breakpoints, you can easily adjust spacing, font sizes, or colors across screen sizes without repeating styles.

Benefits of Using Variables with Breakpoints

1
Keeps code cleaner by centralizing responsive values in one place.
2
Makes global updates easier — change one variable instead of multiple rules.
3
Improves consistency across responsive layouts.

Example: Responsive Variables with Media Queries

In this example, the base font size and container padding are defined as variables in the :root. As the viewport width increases, the media queries redefine these variables, allowing all elements that use them to scale automatically without changing multiple CSS rules.

Best Practices for Responsive CSS Variables

1
Define your main design tokens (spacing, typography, colors) as variables in :root.
2
Override only what’s necessary inside each breakpoint.
3
Use semantic naming (e.g., --font-size-heading, --space-section) for better readability.
4
Test across devices to ensure variable updates work as expected.

Difficulty: 5/10

Topics: variables, responsive design, fallbacks

Scenario Questions

0-2 years experience

1
We have a simple card component that needs a different background color on mobile versus desktop. How would you use a CSS custom property to define the color and switch it at a 768px breakpoint?
2
If you set a custom property inside a media query but later reference it outside that query, what value will be applied and why?

2-5 years experience

1
You’re adding a theme switcher that changes the primary color across breakpoints. After implementing, the color doesn’t change on tablet screens. Walk me through how you’d debug the custom property usage with breakpoints.
2
Explain the trade‑offs between defining breakpoint values as custom properties versus hard‑coding them in each media query. When might you choose one over the other?

5-8 years experience

1
Our design system uses dozens of custom properties for spacing and typography that need to adapt at multiple breakpoints. How would you structure the CSS (or pre‑processor) to keep the variables maintainable and avoid cascade conflicts?
2
Consider a large SPA where CSS is loaded lazily per route. How could using CSS custom properties for breakpoints impact performance, and what strategies would you employ to mitigate any issues?

8+ years experience

1
The company is migrating a legacy codebase that uses many static media queries to a new system based on CSS custom properties for breakpoints. What architectural plan would you propose to roll this out across multiple teams while minimizing regressions?
2
Discuss the long‑term maintenance implications of storing breakpoint values as custom properties in a shared design token file versus keeping them in JavaScript. How does this affect cross‑platform consistency and tooling?

Follow-up Questions

❓Can you sketch the CSS snippet you would write?
❓What happens if the custom property is not defined at the point of use?
❓How would you provide a fallback for older browsers?