How do you balance blog articles with default card styles?

[tony-sull]

I ran into an interesting scenario while using Pico for a blog, curious have everyone handles this!

Use case

On a blog index page, card styles are a huge win out of the box. I end up with a list of <article> cards, one for each post. On a page for a specific blog entry, though, the card layouts get in the way as I would still want to wrap the full post in a semantic <article> element indicating that the full contents of the page are considered an article.

Question

What's the right way to handle this?

Potential solution

Ideally I wouldn't have to eject Pico styles from the entire page or even from the contents of the blog post. I was toying with the idea of whether scoping card styles to children of <li> would make sense for most use cases of a card (I usually see/use them in lists of cards).

[dev-willis]

I would simply target the <article> either with a class or by its position in the DOM (e.g. main > article if you know it's this and only this structure where it occurs) and override whatever styles I need. For me, Pico is a great starting point but I always customize it to fit the look I want.