Hacker News Reader

Comment by clairity | Hacker News Reader

i'm really not a fan of the spacer example, as it reminds me so much of early 00s layout (in this case, adding a bunch of empty spans/divs to represent the spaces). there's a recent proposal for custom functions in css that i believe would allow one to write a simple iterator for this type of use case (use the nth-of-type element count as a multiplier against a set spacer width).

View on HN

I used to think the same, my layouts are full of spacer elements now. As long as they are semantically invisible it doesn’t really matter, but the combination of flex vertical/horizontal stacks + default spacers makes creating stuff much faster (and closer to how mobile apps are made).

Though in this case I would likely have a multiplier attribute in a single spacer, not multiple elements.

They are semantically visible. But visually invisible

yah, to me, spacers and extra non-semantic elements smell like a hack, so i try to refactor those out. sometimes you can't do that with the current state of css (which thankfully is now changing, albeit still slowly), but most of the time, it's possible to remove those extraneous elements.

That’s my point, I used to think the same. The thing is, there is no difference from the machine’s perspective, and you’d have to consider every mobile app a “hack” by that measure since this approach is how native UIs are built. You can reap the benefits of faster development and more straightforward code without giving up anything on performance, accessibility, etc.

it's not faster or more straightforward though. you still have to grok and hack it, so might as well grok and hack it cleanly rather than adding superfluous elements (especially considering accessibility, which is a whole espteric can of worms).

Empty divs or spans without any text content can be semantically “invisible”, if done correctly - will not be read by screen readers, will be ignored by any kind of outliner or content parser.

I make extensive use of spacers. A generic flex container, a fixed-width spacer, and a take-what-you-can spacer cover most needs with three simple elements.

but flexbox already has that built in, with space-around or space-between. you also have gap for more regular spacing needs, and margin on the flex items as a last resort.

Reply on news.ycombinator.com