I used to think that variables in stylesheets were there to make refactoring easier. What I never considered is that they encourage consistency: When you have 4 different spacing variables, you're much more likely to build out a site where the sizes and spacing of each element are much more internally and visually consistent.
The same goes for font sizes and colors. By limiting yourself only to a set of variables, you're much less likely to experience consistency erosion, where your site ends up having 40 different hex values for grays alone.
Bootstrap does this for you, but I've never seen anyone talk about why that feature of Bootstrap is helpful, or why it's a helpful feature of pre-processor design systems in general.
Top comments (0)