DEV Community

Discussion on: The techniques to help simplify CSS

Collapse
fcalderan profile image
Fabrizio Calderan • Edited

I usually go with the first approach using variables if appliable so I don't repeat myself in the code, like so

body {
    --p: 1rem;
    padding: var(--p) calc(var(--p) + .5rem);
}

@media (min-width: 481px) {
    body { --p: 2rem; }
}

@media (min-width: 961px) {
    body { --p: 3rem; }
}

Enter fullscreen mode Exit fullscreen mode

What is the benefit of using more conditions in the mediaqueries? Could you elaborate more?
For my habits I find the second snippet a bit less readable.