It's sad it doesn't get more use. Potwntially this is because CSS frameworks hide all this away and nobody is really learning CSS anymore but I wouldn't really know. I'm not really that exposed to the web front end side of things.
What a lot of developers need to understand is that HTML shouldn't be use for layout. HTML should be use for semantic and information structure.
That was the great lie of the 2000s. It was oft repeated, but almost never adhered to. CSS Zen Garden was cool, but the typical attempt at "separating content from presentation" almost universally resulted in a div soup that was even worse than table layouts. If a div exists only to hang a class off it, so that it can be targeted in CSS, it's a part of layout, not semantic/information structure.
In a perfect world, in which most websites were not actively user-hostile, we could have separation of layout from content. It would include relinquishing control over rendering back to the users. It would require to stop obsessing so much over colors and layouts and custom controls. The very concept is anathema to the modern web, though.
Thanks, I've always thought this intuitively but never seen it written out.
Just as any academic theory hitting the reality through actual implementation, the theory should be more of a guiding force instead of a rigid structure to follow.
Much like how the military learned to plan battles (No battle plan ever survives contact with the enemy - Helmuth von Moltke the Elder) by giving troops higher-level objectives, rather than planning every single step of the attack, such as exactly where they should walk and hide, and expecting them to follow it to a T.
This is how I approach most programming/web design theories... including BEM.
At my last job we called it "divarrhea"
1) a small, extremely vocal group of devs kept reminding us this while the rest of us used the standards "wrong" and did fancy layouts and things,
2) seeing how most of the world used the tools we had, the standards folks didn't give us good layout tools or application development tools, they gave us CSS and it took browser vendors like Microsoft to give us XHR.
Oh what I'd give for the standards folks to have taken some time to look at the world being built around them, and then given us a better way to do that, instead of "HTML shouldn't be used for layout" for years.
I feel like, had things gone in a different direction, web development now would be as easy as VB/Delphi/Lazarus (hell, even tcl/tk) once made desktop app development. Instead, we get the soup of languages, build tools, and the confusing mess of modern web dev.
Sigh.
https://alistapart.com/article/the-story-of-css-grid-from-it...
This is probably the reason. There are still browsers out there that don't support it 100% to the spec.
I'm keeping a beady eye on my stats, awaiting the day and can make a site entirely with CSS Grid.
Of those, only IE11 is relevant, as it's a desktop browser, on wider and taller viewports.
Most of these browsers are mobile browsers on devices with narrow viewports, so even the default `display: block` fallback may be sufficient. If you have margins/paddings/widths etc which only make sense in the CSS Grid version, you can set these properties inside an `@supports` query https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
For IE11, it's a choice of presenting visitors with a slightly worse layout, to match the browser (https://philipnewcomer.net/2014/04/target-internet-explorer-... or, if you use Sass or PostCSS, using mixins that output CSS Grid properties with Flexbox as fallback.
Its bugs are well-documented, and most have workarounds https://github.com/philipwalton/flexbugs. Even inline-block can serve as a fallback, if you can avoid whitespace around tags in the markup (https://css-tricks.com/fighting-the-space-between-inline-blo...)
A reasonable fallback doesn't need to match CSS Grid exactly. The whole point of media queries and responsive web design is that the website won't look exactly the same on all devices; it will look and work as good as it needs to look in that specific device.
This is basic HTML5 literacy. At the end of the day the new HTML5 and CSS features do not fit into out dated work practices and the excuses that go with it. Web content creators and developers should be familiar with all of this stuff and not kidding themselves that the 'sea of divs is the way to go because we do really important projects and need to have polyfills back to IE6'.
Not using the new tags and not using CSS grid is a bit like only eating fast food and no longer knowing how to use a knife and fork. When I look at div soup I know that the team behind the page have not got it yet. None of the div soup HTML is maintainable. It is dated. So any 'wow you can use the details/summary' article comes across to me as 'wow, you have learned to wipe your own nose!' This whole industry needs to get to grips with the lingua franca of the web, focus on document structure, use the stuff that works in evergreen browsers and move away from big up front visual design made into div soup to content driven design. It is that simple and excuses are pathetic.