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.
calc(var(--standard-padding) - 1px)
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!
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.