Stacks of stacks | Heydon Pickering

Heydon's video is an excellent overview of their much-loved owl selector and "stack" layout pattern. I actually didn't realise that Heydon was the original "inventor" of the owl, though it makes a lot of sense in hindsight 😄 Overall, though, the video is just a treasure trove of interesting ideas and code patterns!

• I really like the idea of using a developer-environment stylesheet to visually highlight issues like missing alt text, overly nested <div> elements, incorrect HTML inclusions etc. as a form of automated testing.
• A key benefit of the "owl" selector (i.e. * + *) is the low (zero) level of specificity that it imbues, making it easy to override. But that means adding :not statements increases the specificity and makes it unwieldy. Better to just use targeted overrides to filter out elements or sections that should not have the styles applied.
• I've been increasingly leaning on CSS custom properties to provide "props" within CSS classes and design system components, a technique that is both incredibly powerful and (once you get used to it) a lot more flexible than actual props, because you get in-built media query support without any JS. Heydon mentions a pattern which I've not thought of, but rather like:

<div class="stack" style="--stack-space: 2em">
  <Elem />
  <Elem />
  <Elem />
</div>

You would then set your .stack class like so:

.stack {
  * + * {
    margin-top: var(--stack-space, 1em);
  }
}

Neat 👍 (Namespacing used to mitigate potential collisions)

• In many ways, universal gap support (so close!) is a direct conversion of the owl operator into a first-class feature. Except gap cannot be overridden with exceptions as neatly; where you want different sized gaps between certain section combinations (still possible, but still requires margin and you just have to be a bit more clear).