CSS reset for the gap command

HTML & CSS
1

While working with a complex framework with complex CSS i have come across the following code pattern for the first time:

@media (SOME_MIN_WIDTH: SOME_REM_VALUE) {
  SOME_IDENTIFIER {
    gap: SOME_VARIABLE_SUBSTITUTION
  }
}

The gaps between some HTML structures were a bit big but in a glimpse I find the following to solve the problem:

* {
    gap: initial !important;
}

Does that make any sense?

2

This sounds a bit theoretical. If you’re using !important, you can bet there’s a better way. Why not set a different gap, or no gap at all? Or you could use something like calc() maybe to vary gaps.

2 Likes
3

That basically turns off all the gap properties so there will be no gap at all on any flex/grid elements using a value for the gap property.

That seems a rather dramatic fix with far reaching consequences for yours and any other un sandboxed third party code that may be present.

If its a simple page then it may not be an issue but for any production site I would say no don’t do that.

1 Like
4

I don’t want to mess around with the complex Twig theming and the corresponding complex CSS of this framework and its current core theme which are Drupal 10 and Olivero.

:slight_smile: