|
|
|
|
|
by armandososa
1626 days ago
|
|
> it's funny that the suggested solution (spacers) are basically back to the old 1px transparent gif trick Not really. The Stack component he uses as an example is actually just a thin abstraction over some reusable css. In plain html, it could look like <section class="stack stack--space-3">
<article class="item">...</article>
<article class="item">...</article>
<article class="item">...</article>
</section>
There are no "spacer gifs" anywhere, it's only that you're lifting the margin responsibility to the parent. I may be wrong, but I think the whole stack concept is borrowed from SwiftUI.That said, I've recently started using actual spacer divs that are more similar to the spacer gifs of yore, you mentioned. So I could do things like: <section>
<div class="vertical-spacer-2"/>
<article class="item">...</article>
<div class="vertical-spacer-1"/>
<article class="item">...</article>
<div class="vertical-spacer-1"/>
<article class="item">...</article>
<div class="vertical-spacer-2"/>
</section>
Having been alive during the whole semantic web era, that feels very wrong to me. But it works like a charm to keep your code consistent with a design system which seems like a more noble endeavor than to write html that makes more sense to machines (which was, if I remember correctly, the objective of the semantic web). |
|