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

Posted by Max Goetz
Max Goetz
5,360 Points

Don't use IDs in selectors?

Whenever I create an ID in Codepen and hit the 'Analyze CSS' button, one of the errors that appears is 'Don't use IDs in selectors.'.

Doing a Google search brings up this informative article: http://oli.jp/2011/ids/#performance

This confuses me a little bit though, because through the 'How To Make A Website' track Nick has been creating ID's throughout the lessons.

Should ID's still be used? I guess if you are working on old code it's good to know what ID's are, but should it be used when making new sites?

Thanks! :)

Max

Christian Andersson
Christian Andersson
8,712 Points

link us the codepen so we can take a look :)

Max Goetz
Max Goetz
5,360 Points

Sure thing! I'm new to this embedding thing.

EDIT: I can't figure out the embed feature. Here's a link to the pen: (http://codepen.io/maxgoetz/pen/WbNwZz?editors=110)

2 Answers

Tyler Dix
Tyler Dix
14,230 Points

Regarding your question, "should ID's be used," the answer is absolutely!

ID's and classes are how you target your markup (html document) for styling in your CSS file. The difference between ID's and classes are that ID's are unique to each html document and can only be used once. Classes can be used multiple times.

For example, if you have an multiple images that you want to style similarly, definitely use a class selector. Class selectors are, in my experience, more common. You'd use an ID selector if you're only targeting a specific element one time. Here's an example:

<h1 id="bigTitle">Here's a BIG title that can be targeted one time in your CSS file.</h1>

In this example, you're likely to only have one big fat h1 header, so an ID selector would be appropriate.

In your CSS, you'd target this like:

#bigTitle {
   font-size: 2.5em;
}

Hope this helps. With practice, you'll get the hang of it.

Christian Andersson
Christian Andersson
8,712 Points

Good answer. I'd like to add that OP is getting this warning because CSSLint doesn’t like IDs. However, it isn't "wrong" at all. It all comes down to preference.

Another thing you can do is use relative CSS. For example, if you have the markup:

<body>
  <div>
    <h1>Title</h1>
  </div>
</body>

Rather than giving the h1 an id here to give it the styling you want, you can write it as:

body div h1 {
   /* styles go here */
}

Here is another example when you almost have to use IDs:

<body>
  <div>
    <p id="first">Text 1</p>
    <p>Text 2</p>
    <p>Text 3</p>
    <p>Text 4</p>
  </div>
</body>

CSS:

body div p#first {
  /* styles go here */
}

Try using the above methods. If you make a website that has a lot of CSS, it might get confusing and tiring for you to keep track of every single class or id for every element you want to style. Using the above is one way to avoid having 100s of id's.

Tyler Dix
Tyler Dix
14,230 Points

Thanks Christian,

If you haven't already, I'd appreciate a vote up. I need so many of these up-votes for a particular program I'm in.

I'd appreciate it.

Thanks,

Tyler

Christian Andersson
Christian Andersson
8,712 Points

Already done so ;)

Max Goetz
Max Goetz
5,360 Points

Excellent! Thanks for the clarification!

Tyler Dix
Tyler Dix
14,230 Points

Thanks man. And no worries Max. Just remember that classes and ID's are targeted slightly differently in your CSS.

Targeting a class starts with a period. For instance if the ID "bigTitle" above were a class instead of an ID, you'd target it in your CSS like this:

.bigTitle {
   font-size: 2.5em;
}

Took me a while to get the hang of it and still I'm like, "should I be using a class or ID here?" I usually go with classes unless I have a good reason not to.

Cheers,

Tyler

Christian Andersson
Christian Andersson
8,712 Points

Edited my comment above.

Tyler Dix
Tyler Dix
14,230 Points

I agree with you on that one Christian. Only use ID's and classes when necessary, otherwise you'll have a Bootstrap-looking CSS file with 1000's of lines of code that is difficult to manage.

Dustin Matlock
Dustin Matlock
33,856 Points
Dustin Matlock
Dustin Matlock
33,856 Points

Max, there are both cases for and against this practice. We had a similar question a while back if you want to check it out also.