DEV Community

Discussion on: How and Why I Avoid Magic Numbers in CSS

mpuckett profile image
Michael Puckett Author • Edited on

That’s a really great alternative take! Agree that it can go the opposite direction and hinder readability if you go overboard.

Instead of creating multiple calc functions for various paddings/gaps in the code, I prefer having a standardized set of padding variables. That usually keeps things simple, but requires buy-in from the designer.

In the article I linked there’s a better use for calc, something like: calc(var(--standard-padding) - 1px) for rare exceptions.

Also it may be true that upon initial glance you know fewer specifics about the code (“exactly which number pixels do I push?”), the original intent has been translated into the code, which should make the overall process of making changes easier to reason about.

Appreciate your response!