CODEWITHSUNDEEP
htmlcssheaderfooter
abikar
abikar

Reputation: 31

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?

Upvotes: 0

Views: 846

Answers (5)

user5147563
user5147563

Reputation:

This is really about what do you prefer. I think the most simple and easy to read way could be the attribute selector.

header[main] {/*something*/}

Plus this:

<header main>Main header</header>

Upvotes: 1

Muneeb Pullani
Muneeb Pullani

Reputation: 116

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.

Upvotes: 0

Devang
Devang

Reputation: 454

I would suggest like as below, assuming you are using html5. keep as simple as possible instead to make it complicated. Also keep second level hierarchy as possible to read a code and faster css processing.

header{
 /* enter your css properties */
}
header p{
}
footer{
 /* enter your css properties */
}

Upvotes: 0

Fil
Fil

Reputation: 8873

Have you heard about BEM? Which stands for block element modifier, that help you achieve a reusable component. I think you should use that, it will make your code as if style and a document ready.

more here

Upvotes: 1

Ankur Das
Ankur Das

Reputation: 26

You can simply write css code to write like this header { } or if you have many header on the dom then select the first child of the header:first-child {} or you can write header:nth-child(1) {}

Hope it was help you

Thanks

Upvotes: -1

Related Questions