Hacker News new | ask | show | jobs
by dmitriid 2680 days ago
> content, content, content

Yeah. If by content you mean text and images. And HTML + CSS can hardly handle that.

And here's what I said, and it's true as ever:

> For any sufficiently complex component you'll have div soup

> Div soup is here to stay, because it's literally the only foundational layout element of HTML.

No amount of grand words about hamster wheels and ad hominem attacks like "people who can't spell" will change the sad reality: the web has moved on beyond simple texts with images, CSS and HTML have not.

Here's an example of a component that puts content first. Developed with modern CSS with no hacks (each css class essentially represents a single CSS property, everything is flexbox etc.): https://tailwindcss.com/docs/examples/cards

Do enlighten me how you get rid of the div soup. I'm especially interested in the "lovely HTML5 element" called "a card capable of displaying an image and text".

1 comments

Flexbox is old hat, use your favourite search engine to see how easily it is done with CSS Grid - grid not flexbox.

You can nit pick on any example tutorial but do the research and you will find it all works great with CSS grid, you just might have to learn how it works rather than copy and paste.

The class bloat is another problem with div soup, also sometimes you need to put aside the mentality that everything has to be sooo complex, simplicity is hard, anyone can make everything complex and buy into the myth that everything has to be complex.

There is always a better element than 'div', the exception to the rule is where you need something that would have been an 'object', e.g. a Google 'recaptcha' needs a 'div'.

The same goes for 'span', unless you really need to change the colour of the second letter of a word there is always a better way, e.g. psuedo elements.

> There is always a better element than 'div'

Please show me a better element for “a card to display an image and text”.

It would also be nice if that element used CSS grid.