css classes and id's [duplicate]

This question already has answers here: Closed 11 years ago.

Possible Duplicate:

Use HTML tag names, classes or IDs in CSS?

In CSS, what are the major differences with classes and ids? Why use classes for xyz and why use ids for abc? I know there are similar questions on here, but开发者_如何转开发 none are really answered properly.

I know to use classes with multiple elements with the same properties and ids with unique properties or unique elements, but why? Wouldn't it be an acceptable practice to just use classes so that you don't confuse yourself switching between classes and ids? What is the difference in regards to speed and optimization, SEO, etc...?

---

Wouldn't it be an acceptable practice to just use classes so that you don't confuse yourself switching between classes and ids?

Yes it would be, but let's say you have 1 class for 20 boxes that has like 20 css properties set and you want 1 div to have a different border color it would be better to just give an id to that div instead of creating a whole new class. (if you get what I mean)

Just add the

#specialdiv{
  border-color: #000;
}

instead of creating a whole new class with the same 19 properties and 1 that is different. Ofcourse you aren't force to use a id for this, you can also assign another extra class to this div. (Such as <div class="box special">)

What is the difference in regards to speed and optimization, seo, etc...? This has a simply answer, if you optimize your css, it will result in a lower file size thus resulting in a faster load time which will improve your rankings. (Yes website speed/loading time does matter A LOT)

---

first of all, you can use whatever makes sense to you, BUT if your a fan of semantic markup, and good separation of content and presentation, this may help you:

use classes to identifier / group similar things, similar to classes in OOP. e.g. if you have list of products, and each list element contains data of exactly 1 product, you could give all this list elements the class .product.

in contrast if this list of products is the only product list on this site, you could give the entire list the id #products, or if you need to be more specific #available_products, whatever makes sense semantically

---

It's not that id's should apply to unique elements; it's that they must. This means that you can use them to identify particular elements on your page as being distinct from any other similar element. Besides being essential for many different javascript applications, an id allows you to tweak your classes for specific instances.

Of course, if you never need to do any of the above, stick with classes.

---

In an HTML page you give id to one element to give it its identity that should be unique so you can refer to that element just by calling it from its id.

As for classes you can give give classes to multiple elements in an HTML file. It's like you make a group of elements that share the same properties for example in a class of students all students share some common properties but still have some unique properties that we can refer to by their roll no that is unique for all in the class.

For example in a class of students all the common properties we specify in class.

    .class_students {
        grade:6;
        instructor:Ms XYZ;
     }

And for properties that are unique for different students in that class we will use their roll no which is unique, like

    #roll_no6 {
        name: Micheal;
        age:10;
    }

Similarly some elements can take more than one class, like <div class="rounded blue">. It means that this elements belong to more than one group in case of our school example a student may that belong to a specific class may also belong to say a sports team in that case it will share properties of both the groups.

Now a final example to demonstrate every thing.

    <student id="rollno6" class="grade6 hockey-team">
    </student>

CSS

    .grade6 {
       instructor:Ms XYZ;
       no-students:30;
       major:Math;
    }
    .hockey-team {
       kit-color: blue;
       trainer: Mr ABC;
    }
    #rollno6 {
       name:Micheal;
       lives: somewhere;
       position:center-forward;
       major:Physics;
    }

To give some property that you think should only be applied on rollno6 you can give it to that and rest of the elements of that class would remain same. The property of major in grade6 tells us that all students in that class majors in Math. But you over-ride that property for a specific student rollno6, now rollno6 majors in physics.