[Theodores]

This is yet more div soup judging by the examples in the Repo and the Wordpress theme.

I am struggling to find anything that is using HTML5, CSS Grid, CSS variables and other niceties of evergreen browsers the right way. It is almost as if web development has forked into two paths, one path being div soup bloat and the other being increasingly more complex build tools to arrive at the logical arrival of css in js.

I want the sensible features in modern evergreen browsers without these options of increasing div soup or increasing complexity. We can now have a true separation of content from styling and scripting with design being content first rather than visual mockups and placeholders.

The problem is that to start using the modern good stuff requires unlearning the bullshit that has gone on ever since the browser wars, nobody is giving up on the hacks, the frameworks and the complexity to do it properly with succinct content, succinct styling and straightforward scripts. Everyone is telling themselves they work on a team building products that are far too complex for any chance of going forward to more sensible document markup.

The days of div soup are not over - as exemplified by what we have here - but, once the good stuff has been discovered and the evergreen friendly stuff learned there is no going back to div soup and the working methods that go with it.

[dmitriid]

> It is almost as if web development has forked into two paths, one path being div soup bloat and the other being increasingly more complex build tools to arrive at the logical arrival of css in js.

css in js will not save you from div bloat.

Div bloat exists because CSS+HTML are horrendously bad at actual layout. For any sufficiently complex component you'll have div soup, and newer CSS features reduce the bloat only ever so slightly.

> nobody is giving up on the hacks

New frameworks have very few if any hacks leftover from the browser wars. The framework discussed here uses flexbox almost exclusively. It doesn't mean you don't need dozens of other hacks to display anything more complex that text.

> once the good stuff has been discovered and the evergreen friendly stuff learned there is no going back to div soup and the working methods that go with it.

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

[Theodores]

I think that there is an alternative and the likes of Rachel Andrews are speaking my language when it comes to document structure, no div soup and CSS grid for the layout.

At school or university you have options regarding who you are going to copy to get that assignment done. You can spend hours plagiarising with a lot of work put into rephrasing things slightly so that your work will pass as your own. Or you can spend a lot of time second guessing what everyone else is doing and emulating what you think the solution is. Or you can actually ignore what everyone else is doing and roll your own solution, learning the fundamentals, copying nobody. Then when done you can have a look around and see what you missed in the other ways the problem has been solved. By going original in your thinking you might have missed a trick or two. Or got something wrong. But, with a foundation of original work you can confidently patch up what you have got to be best in class, all defects removed.

I think the web is like that. Sometimes you look for a simple aide-memoire on Stack Overflow where once upon a time all the answers were seemingly brilliant. But then you realise that you have moved on from that, your own code is better, you aren't just copying and imitating, you have this understanding thing going on that is lacking in some of the other answers.

Then there is the hamster wheel of forever having to learn the latest and greatest, that panic and fear of the unknown latest framework. So another round of copying and imitation goes on, the mountain top of confidence and knowledge never reached as there is always another extra thing to add in to the build chain to make it better.

But then you realise you are working on a second rate website to sell hair care products to care bears. And it doesn't need the latest trends in visual design or the convoluted ways of cooking up yet more div soup that nobody is ever going to notice.

I beg to differ on your attitudes towards your staple diet of div soup. Concise, content first actual content is not the same thing as bullshit written by people that can't spell force fed into some content blocks that rightfully should only ever contain the lorem ipsum text the visual mockups demanded of them. It is time people started with the raw manuscript and got the copy right without applying a single style. When this is done styling with CSS grid and lovely HTML5 elements works beautifully. This is no marginal gain in bloat, it is a whole new world of maintainability and awesomeness. If you ain't doing it right you are doing it wrong and some mastery of CSS grid is needed, it ain't just something you sprinkle in div soup like it is a fifty bucks Wordpress theme.

Content is king and there isn't any div soup needed. Maybe a div for holding that Google ReCaptcha button but I am struggling for bona fide instead of lazy ignorant uses thereafter. You have got to get the document structure right, accessible and good for modern CSS.

Of course this falls apart if you need to support 32 bit iPads or that person struggling along with Internet Explorer 6.

[dmitriid]

> 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".

[Theodores]

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.

[dmitriid]

> 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.

[52-6F-62]

I've found Spectre to be relatively palatable.

https://picturepan2.github.io/spectre/index.html

[tomcam]

Seconded. Spectre is small, fast, rich, complete, accessible (I think) and works great on low resource machines.