open-props icon indicating copy to clipboard operation
open-props copied to clipboard

0 margins in normalize looks bad

Open justinfagnani opened this issue 8 months ago • 1 comments

My understanding of CSS "normalize" stylesheets is that they're supposed to unify styling across user agents, not make everything un-styled like CSS resets. I'm a bit surprised then to see this rule:

:where(:not(dialog)) {
  margin: 0;
}

This sets even headers and paragraphs to have no margin, which looks really bad and requires some additional styles to add them back.

Is there a reason all margins are set to 0? Could they instead be set something close to what the user agents have by default, ie 1em for <p> tags, etc.?

justinfagnani avatar Apr 07 '25 22:04 justinfagnani

my understanding is that resets are to unify styling across browsers, while normalize is to sprinkle in meaningful base styles that arent quite a reset but are an opinionated healthier default. you'll find most of the "odd" choices in that stylesheet are opinionated healthy defaults, like a max-width on paragraphs.

This sets even headers and paragraphs to have no margin

totally, i strongly want those defaults to be 0. it's very rare i want header or paragraph margin, as my preference is for ownership of spacing to be in containers/parents rather than children. kinda why they made margin-trim too, except it arrived a bit too late and grid/flex gap is the more manageable way to space.

.block, .stack, .container, .whatever-you-wanna-call-it {
  display: grid;
  gap: var(--size-3);
}

i feel like i only use margin with anchor() now, and have been for a while. gap is just so good.

argyleink avatar Apr 07 '25 22:04 argyleink