I'm completely agreeing using semantic HTML. Usually I'm always trying to use the sectioning elements.
But I'm observing that I'm still heavily using <div>s, inside of an <article> or <section>, especially when layouting with flexbox.
I tend to create a lot of wrapping <div>s, for grouping together some elements as one flex child.
(e.g. for using the margin-*: auto; trick altogether)
It kind of feels unsemantic, but then again, since these are only used for layouting, it seems to be ok.
How do other people feel about that?
I have two feelings:
First and foremost, it's almost definitely fine! The point here isn't to totally get rid of <div>s, it's to stop using them in cases where they have some semantic meaning that's covered by another element. But generic containers with no semantics to them are exactly what <div>s are, so if they're just grouping things for styling purposes, not semantic purposes, you're all good!
Second, with the above said, as kind of a side comment, if you're creating a lot of nested flex containers, you probably would be better served with a flatter HTML structure and CSS Grid for the layout. Grid is supported pretty solidly at this point, and it's usually not hard to create fallbacks for older browsers that still look perfectly fine (even if they don't exactly match the mockup) without adding any extra markup. If you haven't tried Grid yet, give it a shot, it'll blow your mind! (If you can't tell, I'm very excited about Grid, I wrote a couple article about how pumped I am haha, I recommend this one you wanna see the thing I love most)
I just wanted to chime in on the CSS Grid discussion.
If the only reason you aren't using CSS Grid yet is because IE11 needs to look identical; I wrote a whole series on how to write modern CSS Grid code that works perfectly in IE with no fallback styles.
PS. Great article, I'll definitely be recommending it to people.
I'm more and more trying to use Grid, you're right it is mindblowing.
Right now I'm using it for overall page layout and flex for smaller sub items. I need to reconsider if nested flexboxes can be done with grid.
(I actually found my way to this article, via your Why we need CSS subgrid article. Great one, too!)
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.