I’ve written code just like what you see above, and I’ve come to regret it every time. Deeply nested code is tough to read and it tightly ties your CSS styles to the HTML markup of the page. Ultimately, that means your styles will be hard to maintain and nearly impossible to reuse across your site. For instance, if we move the nav element out of the header and into the footer, the nav will be completely unstyled until we change the CSS.
This is how I would rewrite the above code:
Instead of relying on tag selectors like
nav1, I use classes that could be used anywhere on a page2. The
.nav selector isn’t nested inside the
header tag, so I could move the
nav element to another part of the page and these styles would still work.
I still use nesting inside the
.nav-list, but only because I’m relatively certain the HTML markup inside the list won’t change. Even if it does change from being a
ul to some other type of tag, the CSS would need to be rewritten since the styles are specifically changing the default styles of a
IDs are fine as selectors if you’re certain you won’t need to reuse the styles. ↩