What should I use in CSS, id, or class?

Question

I started practicing html and css and some questions arose:

When creating a style for an HTML element what should I use in CSS, class or id?

What are your criteria for choosing what to use in CSS?

Answer 1

If you use Ids, the CSS Lint will accuse your CSS of breaking the rule "Disallow Ids in selectors" (Prohibit ID’s on selectors).

No wonder the slogan of CSS Lint is "Will Hurt your Feelings" ("It will hurt your feelings").

According to the documentation of the rule:

For years, developers have treated Ids as a way of saying "that thing!" However, Ids have a side effect: they should be unique and cannot be reused. You could potentially style all the elements of your page using selectors with ID, but you would lose much 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 myself use Ids in selectors and although I understand and agree with the argument, personally I do not consider a rule so fundamental that it cannot be ignored in some cases.

The "Additional Reading" section of the cited documentation includes two articles that vehemently attack the use of Ids in selectors. One of the articles attracted large amount of comments defending the use of Ids in selectors:

• Don’t use Ids in CSS selectors?
• Don’t use ID selectors in CSS

I personally recommend avoid the use of Ids. However, unlike the class I’m quoting, I don’t think it’s a "horribly monstrous abomination" to use it. Best to avoid, but use once in a while, that’s fine! : -) That’s how I think. There are more serious things to worry about...

Answer 2

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. Already 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 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 from the class cashier then everyone will be 50 by 50.
• 1° element is a combination of classes cashier and blue then he will have all the properties of cashier and will have the blue background.
• 2° element is a combination of classes cashier and red same pattern as before.
• 3° element combines the classes cashier, blue and special it will have the properties of the 2 previous elements and a green edge of the class special.
• The 4° element is unique because it possesses a ID then only it on the page can have the properties of super-special but still he will have all the class properties cashier and red.

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

Answer 3

The choice 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 unique per page. Identifier: #
CLASS - Multiple 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(es). If you have a single element and want to apply CSS rules or a selector only to that element, ID may be more useful.

Example

Answer 4

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

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

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

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

Depictions:

ID = # (lattice/sharp/tic)
Class = . (period)

Answer 5

ID is the identity of a tag. It is unique.
The class you use for a group of tags.

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

Answer 6

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

Use Classes when you want the same properties for a grade of elements.

ID is referenced in the CSS via # and Classes through the ., as below:

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

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

Answer 7

Utilize id when you want to identify only one element in html and use class when referring 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>

Answer 8

Use the id attribute in 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 in an element to assign the element to a particular class. The class name is of your choice. Many elements in a document may belong to the same class.

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Getting_Started/Seletores

Answer 9

Class: can be used by more than one element on the same page, thus creating a category.

ID: is a unique definition/identification and can only be used for only one element on each page.