Introducing a New CSS Unit for “Base Elements” Between Root and Relative

ByEditor

CSS offers root and relative values.

  • Root values, such as rem and rlh, are linked to the values in the :root selector, typically the html element.
  • Relative values, like em, lh, ch, and others, are connected to the font-size of the specific element.

I’ve realized there might be a need for a unit between root and relative values, to size elements without complex calculations.

Example: Prose

Jen Simmons discussed using the lh unit for margin and padding to enhance typographical vertical rhythm.

p { margin-block: 1lh; }

This concept can be expanded to include other spaces around text. The “Lobotomized Owl” technique by Heydon Pickering is one approach.

* + * {
  margin-top: 1lh;
}

The :not(:first-child) can also achieve the same effect, potentially more readably.

*:not(:first-child) {
  margin-top: 1lh;
}

Selectors often need constraining to prevent them from affecting the entire page. The .prose class is useful for this.

.prose {
  *:not(:first-child) {
    margin-top: 1lh;
  }
}

This works well, but issues arise when different typography sizes are included, as 1lh for an

can be large.

Using Flexbox on the parent element can circumvent this issue by setting gap to 1lh, avoiding changes in 1lh for h2 and margin collapse.





Discover more from WIREDGORILLA


Subscribe to get the latest posts sent to your email.

Similar Posts