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 trialSjoerd Vermeijden
5,840 PointsWhy are you using id so much?
Since id's way 10 times what a class does, and since you will probably have to use !important to overwrite the set styling of and id, why not avoid it as much as possible?
5 Answers
Steven Parker
231,275 PointsId's must be unique on the page, so they make sense for identifying and styling an element that will be used only once. Classes are a good choice for when the styling will be applied to more than one element.
You do not need to use "!important" to apply styling to an element identified by Id when using CSS, you only need a rule that targets the element specifically. You might be thinking of inline styling.
Jack Cummins
17,417 PointsID's are good to use sometimes. They can override most things, so if the rule is important you want to use an ID.
Here are some more reasons why ID's are good:
Classes have no special abilities in the browser, but ID's do have one very important trick up their sleeve. This is the "hash value" in the URL. If you have a URL like http://yourdomain.com#comments, the browser will attempt to locate the element with an ID of "comments" and will automatically scroll the page to show that element. It is important to note here that the browser will scroll whatever element it needs to in order to show that element, so if you did something special like a scrollable DIV area within your regular body, that div will be scrolled too.
This is an important reason right here why having ID's be absolutely unique is important. So your browser knows where to scroll!
You're Welcome, Jack
Sjoerd Vermeijden
5,840 PointsThanks for clarifying that up for me!
Brandon McClelland
4,645 PointsGenerally you want to use id for unique elements on the page. Classes are not unique. For example, it would make sense to create an id called Navbar since you should only have one main navigation bar element on a page. It would make sense to create a class called BlueText since many elements might have blue text in your document. Your Navbar id could also have a Class of BlueText if you wanted the navigation bar element to have blue text, like this:
<div id="navbar" class="bluetext some_other_class yet_another_class">
This has less to do with styling and CSS than with defining unique elements of the DOM. You can use as many classes as needed on a tag, but an id must be unique to the document.
Sjoerd Vermeijden
5,840 PointsThank you for your answering!
Jack Cummins
17,417 PointsTrue. It also is because ID's are unique
Jack Cummins
17,417 PointsYou're Welcome!
Sjoerd Vermeijden
5,840 PointsSjoerd Vermeijden
5,840 PointsThanks! I was aware that you don't need to use !important when styling id's but when i'm using an already build WordPress template for instance i end up using a lot of !improtant since there are a lot of selectors used which makes it hard to overwrite. Thank you again for your aswer!