Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) Basic Selectors Reusing Classes

Sebastian Finé
Sebastian Finé
2,972 Points

Why not make header id="header" and using a class for span?

<header id="top" class="main-header"> <span id="header">

Why not make header id="header" or "main-header" and using a class for span?

In most cases header is only used once, isn´t it? Yes you can, but do you?

Why put a class main-header to it, even if it´s the only and unique main-header?

Why not use the #top to style?

I could go with <header id="top" class="header"> styling all headers and putting the extra into #top.

Somehow it doesn´t really seem logical to em, the way it is.

1 Answer

Sebastian Finé Hey Sebastien, I may not know all the reasons, but I'll answer your question to the best of my knowledge. I try my to use IDs as sparingly as possible because they have a very high selector specificity which means not many other selectors can override their styles. This being said, if you give a class an ID and months down the line try to change the styles by its class name you may run into an issue where the styles aren't changing and be completely lost as to why they are not. Another thing to mention here, is that there actually could be more than one header element. The header element isn't exactly specific to the header of a page, you could have a header to a specific section as well. One last thing, I would avoid styling the header based on the "top" ID because imagine if someone else contributes to your code and is in your CSS file looking to change a style in the header. They would be looking for a CSS class with the name "header" or something that resembles the page heading. They would not be very likely to check the #top selector. I hope all this makes sense, let me know if you need any clarifications.

Sebastian Finé
Sebastian Finé
2,972 Points

Hi Ryan, thanks for your answer. I probaly was confused as it was called main-header,