Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there any pros and cons if i use always CSS Class instead CSS ID for everything?

In CSS we can use both ID and class. is there any pros and cons if i use Class always instead ID in terms of Semantic, Web standards- W3C , SEO , Accessibility and future maintainability?

like image 944
Jitendra Vyas Avatar asked Dec 10 '09 05:12

Jitendra Vyas


People also ask

Is it better to use ID or class in CSS?

The basic rule that you need to keep in mind while using classes and ids in CSS is that, id is used for single elements that appear on the page for only once (e.g. header, footer, menu), whereas class is used for single or multiple elements that appear on the page for once or more than once (e.g. paragraphs, links, ...

Should you use ID in CSS?

It is not advisable to use IDs as CSS selectors because if another element in the page uses the same/similar style, you would have to write the same CSS again. Even if you don't have more than one element with that style right now, it might come later. Hence it is always advisable to use class.

Which is faster ID or CSS?

Locating elements by id is faster than css. Because : id of an elements is more specific than css of an element.

Which is better class or ID in HTML?

Output: Difference between id and class attribute: The only difference between them is that “id” is unique in a page and can only apply to at most one element, while “class” selector can apply to multiple elements.


1 Answers

One big difference: in CSS, a class has a lower importance level than an ID.

Imagine that each specification in a CSS declaration added a certain number of points to that declaration's value. Let's say the points go something like this (totally made up, but whatever):

  • Tag name ('a', 'div', 'span'): 1 point
  • Class name ('.highlight', '.error', '.animal'): 10 points
  • ID ('#main-headline', '#nav', '#content'): 100 points

So, the following declarations:

a {     color: #00f; }  .highlight a {     color: #0f0; }  #nav .highlight a {     color: #f00; } 

are worth 1, 11, and 111 points (respectively). For a given tag, the declaration with the highest number of points that matches it "wins". So for example, with those declarations, all a tags will be blue, unless they're inside an element with the "highlight" class, in which case they'll be green, unless that element is inside the element with id="nav", in which case they'll be red.

Now, you can get yourself into tricky situations if you're only using classes. Let's say you want to make all the links in your content area blue, but all the links in your foo area red:

.content a {     color: #00f; }  .foo a {     color: #f00; } 

By my previous (made up) scale, those both have 11 points. If you have a foo within your content, which one wins? In this situation, foo wins because it comes after. Now, maybe that's what you want, but that's just lucky. If you change your mind later, and want content to win, you have to change their order, and depending on the order of declarations in a CSS file is A Bad Idea. Now if, instead, you had the following declaration:

#content a {     color: #00f; }  .foo a {     color: #f00; } 

Content would always win, because that declaration has a value of 101 (beating foo's 11). No matter what order they come in, the content declaration will always beat the foo one. This provides you with some very important consistency. The winners won't arbitrarily change based on changing orders in the file, and if you want to change the the winner, you have to change the declarations (maybe add a #content in front of the .foo declaration, so it will have 111 points).

So basically, the differences in values are important, and you get a lot of inconsistency and seemingly arbitrary winners if you just use classes.

like image 175
jakeboxer Avatar answered Sep 20 '22 21:09

jakeboxer