From 2b0e5c7ff46d1c1771e3baa2999b3043b8b9c165 Mon Sep 17 00:00:00 2001 From: Brandon Pugh Date: Wed, 29 Nov 2023 11:43:26 -0600 Subject: [PATCH] Add flow-spacing til --- css/flow-spacing.md | 39 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 css/flow-spacing.md diff --git a/css/flow-spacing.md b/css/flow-spacing.md new file mode 100644 index 0000000..97041e5 --- /dev/null +++ b/css/flow-spacing.md @@ -0,0 +1,39 @@ +--- +date: 2023-11-29 +--- + +# Flow spacing and the lobotomized owl + +This is another #til by proxy. A teammate asked about a css selector I used which has come to be referred to as the ["lobotomized owl"](https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/) (`* + *`): + +``` css +.flow > * + * { + margin-top: var(--flow-space, 1em); +} +``` + +What this does is select every child element of the `.flow` class except the first one. + +You can also use newer CSS selectors to do the same thing in a way that might be more obvious: + +```css +.flow > *:where(:not(:first-child)) { + margin-top: var(--flow-space, 1em); +} +``` + +The above snippet is probably my favorite css utility called [flow spacing](https://24ways.org/2018/managing-flow-and-rhythm-with-css-custom-properties/). + +It's a nice way to easily add consistent spacing between elements in your project and because css variables cascade, it's easy to override for specific contexts within different classes: + +```css +.flow--space-compact { + --flow-space: .75em; +} +``` + +or with inline styles: ``. + +I'm in the camp that parent components should be responsible for spacing out their child components and this utility makes that easier to do with consistency. + +