Am I a genius or is this madness or both?

I have a css variable --row-gap: var(--spacing); and this is used for spacing between items in a grid. In some places I want no gap, so I use something like this:

.grid--no-gap {
  --row-gap: 0px;
}

BUT when I run the CSS linter, it removes the px so then my variable doesn't work. Here's where the genius/madness lies: to fix this, I have set the --row-gap like this:

.grid--no-gap {
  --row-gap: calc(1px - 1px);
}

In terms of uniformity and ease of remembering, I could also go one step further and create a new variable like --no-gap: calc(1px - 1px) and then use that where it's needed.

.grid--no-gap {
  --row-gap: var(--no-gap);
}

I know I could change the stylelint rules, but ignore that as a solution for now, and let's concentrate only on the idea that the above is genius or madness. What do you think?

Filed Under:

1. CSS