IDs in selectors

silvine

Codeacademy is telling me I shouldn't use IDs in selectors. Here's my code, how should it look?

#best_friend {
    border: 4px solid #00C957
}
#archnemesis {
    border: 4px solid #CC0000
}

KonFusion

http://www.htmldog.com/guides/cssintermediate/classid/

If that doesn't help google HTML/CSS selectors

Also, doesn't code academy provide hints & tips for each section?

desaparecidos

silvine wrote: »

Codeacademy is telling me I shouldn't use IDs in selectors. Here's my code, how should it look?

#best_friend {
    border: 4px solid #00C957
}
#archnemesis {
    border: 4px solid #CC0000
}

What exactly are they saying?

silvine

I passed the section but there was an explanation point saying I shouldn't use IDs in selectors on the lines for #best_friend and #archnemesis.

I was just curious about why.

Colonel Panic

At a guess, it's probably because the general case using class selectors is more flexible than using ids for selectors. Obviously though, if yo have to, you have to.

KonFusion

Colonel Panic wrote: »

At a guess, it's probably because the general case using class selectors is more flexible than using ids for selectors. Obviously though, if yo have to, you have to.

Yup I'd say so too.

Check this out OP http://css-tricks.com/the-difference-between-id-and-class/

Giblet

I don't think that advice really too useful

In this scenario,

.someClass #someid a

Most CSS selector engines will stop at #someid (reading right to left)

I don't think I can think of another reason where usage of id's matter besides the fact that an id targets a single element

breadmonster

What your talking about is CSS Specificty (The weight assigned to your css) and which style gets applied to your elements.
There is an easy way to work it out:
ids = 100pts
class = 10pt
html selectors = 1pts

So if you have something like this:
#mybox div li.top {
color: red;
}

Thats 100 (#mybox) + 1 (div) + 1 (li) + 10 (.top) = 112 points.
Its hard to override that element because the ID carries so much weight.
Its better to start out with just using the selectors and then use classes to override them when needed

li { /* 1 point */
color:red;
}

li.top { /* 11 points */
color:green
}

Its best not to use ids for your css you can use them for your javascript instead.

silvine

breadmonster wrote: »

Its best not to use ids for your css you can use them for your javascript instead.

One language at a time!

desaparecidos

breadmonster wrote: »

Its best not to use ids for your css you can use them for your javascript instead.

Nonsense!

I've seen this "don't use IDs in CSS" theme on other sites / blogs. It's bollocks. Sometimes very heavy specificity is exactly what we want!

In your HTML give your unique, main, elements IDs. Then in your CSS create rules which can be applied to multiple elements which share common style properties. These are your classes. Then you can use the IDs in combination with classes to override styling in certain sections of the page. And always write your CSS in a cascading manner, regardless of whether the selector is more specific and could be placed higher up in the style sheet.

Feathers

I don't think anyone really suggests don't use IDs if you actually want high specificity, it's more about giving learners guiding principles that will help them as they learn the language.

If you know why you're using an ID in order to weight the cascade, it's a valid use. If you start off by using IDs for everything, you'll find it harder when you run into difficulties styling something & you're not sure why it isn't working as you expected (granted, if you stick with it, you'll probably understand the language better because of it, but you set yourself up for frustration).

KonFusion

Read this: http://csswizardry.com/2012/11/code-smells-in-css/

Feathers

KonFusion wrote: »

Read this: http://csswizardry.com/2012/11/code-smells-in-css/

The JS Fiddle that he's created within that is a great example of the (potential) problem of IDs in CSS — to get the CSS to work, you'll need to modify it to something like

.twitter a,
#page-head .twitter a{
    color:#333;
}

Which is fine on it's own, but if you want to place the component somewhere else, you'll have to add another line of selectors:

.twitter a,
#page-head .twitter a,
#page-footer .twitter a{
    color:#333;
}

& this could build up even further. If the page-head element had been a class, the natural precedence of styles defined lower down would mean you wouldn't have to add any additional CSS at all.