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 How to Make a Website Adding Pages to a Website Build the Contact Page

Posted by Nicholas Chan
Nicholas Chan
1,281 Points

Why uses 'class' instead of 'id'?

I know that the 'class' is for a elements that may be appearing more than once in a page where as 'id' is for a unique element. But in the video, Nick is using class for unique element like contact-info and list item, why is he not using the 'class' tag? Thanks.

8 Answers

Kiko Doran
Kiko Doran
4,752 Points
Kiko Doran
Kiko Doran
4,752 Points

Class has been traditionally something that gets reused in your code if possible and IDs have always been single use names. So when it comes down to keeping your code slim, it is generally better to style off of classes so you can reuse the classes that are able to be reused. There are also some specificity issues that come up if you style off both IDs and Classes. Things ultimately may not cascade the way you expect. Better to just stick with classes as the general rule and then if you need to break it, you can break it. Classes for styling is a good practice to start with though.

If you can post the actual code, I could probably give you a more descriptive answer to the actual use.

Christopher DiLorenzo
Christopher DiLorenzo
4,933 Points
Christopher DiLorenzo
Christopher DiLorenzo
4,933 Points

A lot of people avoid id's as a best practice just in case they use it again and for consistency. It also has a tendency to instill better naming conventions in the developer (personal opinion)

Christopher DiLorenzo
Christopher DiLorenzo
4,933 Points
Christopher DiLorenzo
Christopher DiLorenzo
4,933 Points

A lot of people avoid id's as a best practice just in case they use it again and for consistency. It also has a tendency to instill better naming conventions in the developer (personal opinion)

David Endersby
David Endersby
24,915 Points
David Endersby
David Endersby
24,915 Points

Classes are reusable which is the main reason people use them. I think its also one of those things that once you get more into webdesign and develop more reusable and dynamic code, classes become a no brainer.

Hope this helps.

Michel van Essen
Michel van Essen
8,077 Points
Michel van Essen
Michel van Essen
8,077 Points

On the other spectrum, you can use it's as anchors bit you can't use classes as anchors so if you have a single page website - use ID for that.

For the test, I still use ID just as a cerebral reminder to ID sections, then again, that's just me. : o)

Kiko Doran
Kiko Doran
4,752 Points
Kiko Doran
Kiko Doran
4,752 Points

The wrapper is surrounding a single use item like many have stated above. You wouldn't want to style on that as it would apply the style elements to all of your <li>s I believe this is a good example of when to use IDs vs Classes. Say you had two unordered lists, you'd want to differentiate them with different IDs but you could have all the same stylings if the lists were of like items, which is quite common. All that said, you don't have to use the IDs at all. You can use classes on the wrapper elements too. The IDs are a good way to define the element with a unique identifier though. I think if you just keep chugging and try to make use of classes for all css stuff, you'll do great and it will be more clear to you in the future how and when to use each. Good question to try and get straight in your head.

Nicholas Chan
Nicholas Chan
1,281 Points
Nicholas Chan
Nicholas Chan
1,281 Points

For example, in these code, the wrapper uses ID, and the unordered list and list items uses CLASS, it's quite confusing as all of them as similar to the 'wrapper', only appear once in the page.

<div id="wrapper"> <section> <h3>General Information</h3> <p>I am currently looking to learn new stuff and engage in basic project to help me improve my skill. If you have any questions, please don't hesitate to contact me!</p> </section> <section> <h3>Contact Details</h3> <ul class="contact-info"> <li class="phone"><a href="tel:55585425">555-6425</a></li> <li class="mail"><a href="mailto:nicholas@example.com">nicholas@example.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nicholaschan&quot;&gt;@nicholaschan&lt;/a&gt;&lt;/li> </ul>

Nicholas Chan
Nicholas Chan
1,281 Points
Nicholas Chan
Nicholas Chan
1,281 Points

Thanks to all for the answer, I think I do understand the differences between two. Appreciate it! :)