Why nest container divs in section/nav/article elements?
This has likely been covered before, but it feels like a really generic thing to find with search. I'm making my way through "Build a responsive website with HTML & CSS" playlist and I saw Kevin nesting a container div inside other elements like
<nav>
<div class="container"> ...
or
<section>
<div class="container"> ...
Why not style the section or nav elements directly?
23 Replies
Big ol #depends
Without any other context I would say there is no good reason and they should just be the containers
fair point, this is the specific part of the video https://youtu.be/3K6zr1CdZy8?si=Xe8odfUzuBQXbZt7&t=903
Kevin Powell
YouTube
Build a responsive website with HTML & CSS | Part two: Writing the ...
It's time to write the HTML for our project!
If you missed part 1, you can find it here: https://www.youtube.com/watch?v=3K6zr1CdZy8
š Links
ā
The code from Part 1: https://github.com/kevin-powell/fem-manage-landing-page-part-1
ā
More on Semantic HTML: https://youtu.be/NexL5_Vdoq8
#css
--
Come hang out with other dev's in my Discor...
and repo this code lives in https://github.com/kevin-powell/fem-manage-landing-page-part-2/blob/master/index.html#L16-L30
GitHub
fem-manage-landing-page-part-2/index.html at master Ā· kevin-powell/...
Contribute to kevin-powell/fem-manage-landing-page-part-2 development by creating an account on GitHub.
Well that shows he did put a class on the nav
Few things he could have done better in that though
probably each section could get the container class like you pointed out.
Also the* divs wrapping the headings w/paragraphs could be <header> elements
Just remember when learning that most things can be improved on and teachers are just people too, not everything they are doing in that moment is going to be what you want maybe.
There are also times you want your inner container to be styled differently than your parent container. Eg your container class has a max-width on it and you want your parent container (section / nav) be be full width
yea good point always #depends
which he does do some styles on other <section>s it looks like. So there is a reason.
yea so looking a bit closer at the repo code, Vince pretty much nailed why Kevin did it
container is to keep the max-width and things justified the same, while the sections can fill full width and get different bg colors or what have you
i.e.
Kevin Powell
YouTube
A new approach to container and wrapper classes
The wrapper or container is probably the most common design pattern around, but after coming across an article by Stephanie Eckles looking at how we can use a grid to emulate a container, and have simple breakouts ā https://smolcss.dev/#smol-breakout-grid ā I had an idea of how we could do this to completely drop the idea of containers, and then...
This is my fav way do do it ā¤ļø
#gridLifeIsNice
Which would eliminate the extra wrappers. (in most cases anyway)
#depends lol
i keep seeing this vid but i've been lazy... ill have to check it out š
Yea it was already my new favorite way to wrapper, glad Kevin made the video. Showed him mine and the og article. ā¤ļø
Grid is life
that's called having good semantics, has nothing to do with styles
https://developer.mozilla.org/en-US/docs/Glossary/Semantics
They are not questioning the semantics, but if the extra divs where necessary.
they necessary for good semantcis
they are not extra divs
they said
<nav> and <section>I think you are missing the point
in their question
which they thought it's for styling purposes
Yes and why can't they be the ones being styled
which is not.
they didn't ask about
I'm not going to go circles with you š
you guys lack knowledge
based on my last interactions with u
You don't know me, so I'd avoid insulting me
i do
we're literally seeing the same question
nvm, you're right
missed the last part of the question
Happens I do it too, also if you knew me you would know I very much love semantics and accessibility... It's something I talk about A LOT
Hence why I pointed out <header> being a better r wrapper in the sections around the heading
I remember watching that a few months ago, re-watched it on your recommendation, it made a lot more sense second time around
How did you imagine this interaction going? There's basically no way to interpret that other than an insult. Why insult random people on the internet instead of taking a few more questions to clarify your understanding?
If your goal was answering my question or just adding new perspective to the discussion, "you lack understanding" has basically 0 chance of achieving that
if the goal was to be an internet badass, no one will be impressed unless you're behind seven proxies