Css Best Practice About Id and Class

CSS Best Practice about ID and Class?

I guess they always use the id in examples because it's less ambiguous. You know that they're talking specifically about that one element and its styles.

In general, the rule of thumb is that you should ask yourself: "is there more than one element which requires the same style, now or at any time in the future?", and the answer is even "maybe", then make it a class.

CSS Best-Practice: Selectors or Classes / IDs?

The choice will depend on how your HTML is structured. If a certain style is used more than once, use classes. If a style used only for a specific tag, use IDs. Regarding the selectors, the trick is to keep them as short as possible.

CSS best practice regarding classes and ids

id's are more powerful selectors than class. It is advisable to use class not id for better programming or coder. (there are many other reasons also)
You can do the same thing with the class itself without giving id.

Good that you are using CSS variable naming property/p>

Which method is better? CSS classes or ID's?

The golden rules goes as this: use id for chrome elements, use class for content elements. So method 2 is the better.

You can read this article on css-discuss for inspiration: http://css-discuss.incutio.com/wiki/Classes_Vs_Ids

There is nothing that stops you from using id attributes on unique content elements, and in some cases it can be a nice way to speed up javascript DOM traversals. For styling purposes, however, it is considered by many as bad practice.

The main points to consider are these:

1. classes can be used for multiple inheritance, id's needs to be unique
2. selector specificity can become a nightmare if you need to use inheritance paired with id styling

Whenever I use id attributes on non-chrome elements it is purely for fast javascript access, and never for styling.

What is the difference between id and class in CSS, and when should I use them?

For more info on this click here.

Example

<div id="header_id" class="header_class">Text</div>

#header_id {font-color:#fff}
.header_class {font-color:#000}

(Note that CSS uses the prefix # for IDs and . for Classes.)

However color was an HTML 4.01 <font> tag attribute deprecated in HTML 5.
In CSS there is no "font-color", the style is color so the above should read:

Example

<div id="header_id" class="header_class">Text</div>

#header_id {color:#fff}
.header_class {color:#000}

The text would be white.

How to choose between `class` and `id`

Use id to identify elements that there will only be a single instance of on a page. For instance, if you have a single navigation bar that you are placing in a specific location, use id="navigation".

Use class to group elements that all behave a certain way. For instance, if you want your company name to appear in bold in body text, you might use <span class='company'>.

Bad css practice to style elements by their id directly instead of referencing css class?

It's not a bad or good practice. The purpose of the id selector differs from class.

If you're planning to style this one element only and not re-use the styles anywhere else - id is you choice. If you need a lot of similar div-s to have the same style - use class

HTML5 class and id naming convention best practices

For example: I have only one main element on the page. Is it a bad
idea to give it an id or class?

It depends

Consider this:

You are using multiple pages,
all pages have one main element each,
but all are linked to one single CSS file,

but you want all main to have some different styling...

You should probably use id here

in any other case where page has only one element of a certain tag and has it's own seprate css it's redundant to use ids or classes

---

Related Topics