skip to main content

Managing Flow and Rhythm with CSS Custom Properties
24ways.org

Andy Bell suggests using CSS Custom Properties together with Heydon Pickering’s lobotomized owl selector to manage vertical spacing. It’s an elegant solution that works well with the cascade:

.flow {
  --flow-space: 1em;
}  

.flow > * + * { 
  margin-top: var(--flow-space);
}

I’ve been experimenting with old-school margin collapsing for vertical rhythm this past year, in Cobalt. I’m a proponent of spacing being an inherent property that exists by default instead of something that has to be explicitly added. But margin collapsing doesn’t really play well with Grid layout (until we get something like margin-trim), so I might give this method a try.