Use (* + *) for vertical spacing

[pinkhairs]

Hi all, love Pico!!

I notice I find myself using margin-bottom: 0 a few times on the last item of a stack. I propose using the "lobotomized owl selector" to space items more intuitively. It's described in this A List Apart article: https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/

Basically, instead of

article > * { margin-bottom: 1rem } /* adds bottom margin to all immediate children */

Do this:

article > * + * { margin-top: 1rem } /* adds top margin to all immediate children except the first one */

The effect is illustrated here:

Let me know what you think, I'm happy to take care of this, I just wanted to post a discussion thread first like it says in the Contributing doc.

[dday9]

Both the :not negation pseudo-class and :last-child pseudo class are widely available with the exception of IE in versions older than IE9 and are much more readable in my opinion. Plus, you can keep the existing styling instead of changing margin-bottom to margin-top.

If this is something that you want to implement, then I'd recommend:

article > *:not(:last-child) { margin-bottom: 1rem }

Fiddle: https://jsfiddle.net/j6ugz7ea/

Visually, you'd get the same result, but from a code perspective it is much easier to understand the negation pseudo-selector.

Edit -
By the way, I had never heard of the phrase "lobotomized owl" before. That is a wildly hilarious name and totally makes sense when I look at it.

Edit #2 -
I don't know who the author of the linked blog article is writing for, but it definitely aint me. The vocabulary is much too verbose and my eyes glazed over like the blog's header image.

[pinkhairs]

I think you're right. In the article it mentions needing to predict the level of nesting, but it was written over 10 years ago, a year before :not. I did a check to make sure the same result is produced and it is so I'm happy. https://jsfiddle.net/f2mxc8zg/3/