Search code examples
htmlcssheaderfooter

HTML <header>/<footer> most common CSS practice

What's the best style, for styling 'main' header (or footer) in CSS?

I've styled just like: header { ... }

but then I remembered, that there can be more than 1 header in html...

  1. So I rewrote: body > header { ... }

But it's rather not beautiful. To write in several places smth like body > header .search { ... }

2.nd possibility: <header class="main-header">

But it's also not very beautiful.

  1. Of course, it's possible just to ignore, that there can be several headers (footers). But I markup html/css not for myself, so it's possible, that smb will add new header/footer elements in html.

So, what is the best style? That is used in great companies like Google, StackOverflow, Microsoft, IBM and so on.

Hey! I've an idea! What's about to write for main header/footer simple header { ... } and for special headers/footers smth like .some-element header { ... }? Now it's obvious for me, that it's the best style. Am I right?

Solution

  • It’s important that we’re all focusing on the performance improvements that our users will really notice. So it is not about how beautiful it is rather than an optimized one.

    For CSS, there are several things that we have to consider. In case of selectors, we have to focus on how CSSOM would construct (You can learn more from here, a course provided by team Udacity).

    For a matter of performance, use classes instead of tags. Also, usage of two or more rules(like div>p>span) will cause more time to render the page.