What should I use in CSS, id or class?

If you use IDs, CSS Lint will accuse your CSS of breaking the " Disallow IDs in selectors

No wonder the slogan of CSS Lint is "Will hurt your feelings".

According to the rule documentation:

  

For years, developers have been treating IDs as a way of saying "that thing!"   However, IDs have a side effect: they must be unique and can not be reused.   You could potentially stylize all elements of your page using ID selectors,   but you would lose a lot of the benefits of CSS in the process.

     

One of the benefits of CSS is the ability to reuse style rules in multiple places.   When you start using selectors with ID, you are automatically   limiting that style to a single element.

I even use IDs in selectors and although I understand and agree with the argument, I personally do not consider such a fundamental rule that it can not be ignored in some cases.

The "Further Reading" section of the cited documentation includes two articles that vehemently attack the use of IDs in selectors. One of the articles attracted a lot of comments defending the use of IDs in selectors:

• Do not use IDs in CSS selectors?
• Do not use ID selectors in CSS

I personally recommend Avoid Use IDs. However, unlike the class I'm quoting, I do not think it's a terribly monstrous "abomination" to its use. Best to avoid, but if you use it every now and then, fine! :-) That's how I think. There are more serious things to worry about ...

Choosing to use ID 's or Class (es) depends on what you need.

The great difference, and that often leads to the choice of one of them, is:

  

ID - One single per page. Identifier: #
CLASS - Multiples per element / page. Identifier: .

So, if you have a CSS rule or need to use a selector and want to apply it to many elements , use Class (en). If you have a single element and you want to apply CSS rules or a selector only to that element, ID might be more useful.

Example

Classes are used to distribute properties on multiple page objects, since 1 class can be used by infinite objects and each object can have infinite classes. The ID is a more reserved selector since it can only be used by 1 single object on the page.

I'll give you a practical example, let's assume the following CSS sheet:

caixa {
    height: 50px;
    width:  50px;
}

azul {
    background-color: blue;
}

vermelha {
    background-color: red;
}

especial {
    border: 2px solid green;
}

#super-especial {
    border-radius: 10px 10px 10px 10px;
}

Now let's say you have the following HTML file:

<div class="caixa azul"></div>
<div class="caixa vermelha"></div>
<div class="caixa azul especial"></div>
<div id="super-especial" class="caixa vermelha"></div>

Explanation

• All elements of this page are of the box class so everyone will be 50 by 50.
• The 1st element is a combination of the box and blue classes so it will have all the properties of box and will have the blue background.
• The 2nd element is a combination of the box and red classes same as the previous one.
• The 3rd element combines the box , blue and special classes it will have the strengths of the 2 previous elements and a green border of the class special .
• The 4th element is unique because it has a ID so only the element on the page may have the properties of super-special but it will still have all properties box and red classes.

Unfortunately today CSS is underestimated by many programmers, mostly beginners, who use it only by setting properties randomly, completely disregarding the combination of classes and inheritance properties.

You can use ID's for unique parts of your layout structure, such as: header, footer, top, menu. However, if you wish to use the ID #cabecalho for example repeatedly on the page it will not be possible.

  

ID = Identifier, can be used only once in page
  Class = Class, can be used to associate the style with several   elements.

The result is the same according to what you work and what you expect to get, I particularly use very little ID's (#), I always develop my layouts using class because it allows the possibility of associating them with several elements.

Everything goes from what you are developing, also according to the result you want to get.

Representations:

  

ID = #

ID is the identity of a tag. It's unique. Home Already the class you use for a group of tags.

They work in the same way, but try to use the id only on specific and unique tags on your system. So you avoid conflicts.

Use id when you want to identify only one element in html and use class when you want to refer to more than one element.

Example

<html>
    <head>
        <style type="text/css">
            #conteudo{
                background-color:#CCC;
            }
            .caixa{
                background-color:#555;
                color:#FFF;
                display:block;
                height:100%;
                width:100px;
            }
        </style>
    </head>
    <body>
        <div id="conteudo">
            <div class="caixa"></div>
            <div class="caixa"></div>
        </div>
    </body>
</html>

Use ID when you want CSS properties to be directed to just one element.

Use Classes when you want the same properties for a series element.

IDs are referenced in CSS through # and Classes through . , as below:

<style type="text/css">
 #conteudo{
        background-color:#CCC;
 }

 .caixa{
        background-color:#555;
        color:#FFF;
        display:block;
        height:100%;
        width:100px;
  }
</style>

Use the id attribute on an element to assign an ID to that element. The ID name is of your choice and it should be unique in the document.

Use the class attribute on an element to assign the element to a given class. The name of the class is of your choice. Many elements in a document may belong to the same class.

Reference: link