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).

Explore Other Notes

Newer

Alternatives to absolute positioning

Ahmad has put together some really interesting examples of where modern CSS techniques can replace traditional use-case for absolute positioning. I'd be really interested to know how some of them […]

Older

The SPA morality play

Baldur has written a wonderfully paced, deeply interesting post on the whole SPA/MPA (AKA normal website) debate with one critical conclusion: SPAs are fine; MPAs are fine; anything will suck if […]
  • 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"&nbsp;of the owl, though it makes [&#8230;]
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.