Using CSS Custom Properties with Breakpoints
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.
Keeps code cleaner by centralizing responsive values in one place.
Makes global updates easier — change one variable instead of multiple rules.
Improves consistency across responsive layouts.
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.
Define your main design tokens (spacing, typography, colors) as variables in
:root.Override only what’s necessary inside each breakpoint.
Use semantic naming (e.g.,
--font-size-heading,--space-section) for better readability.Test across devices to ensure variable updates work as expected.