0

Lately I'm working with a lot of Wordpress themes. When I have to edit a particular element, I usually use Firebug to see the element's name so I can change the CSS. I think I understand the difference between IDs and Classes, Classes are used for a group of elements that you want to share the same styling, and ID is usually used for a single element.

Here's the thing, I'm seeing so many elements in these Wordpress themes that are only used once, but they are assigned to a class. A good example is the website logo. Isn't the logo only used once? Shouldn't it be assigned to an ID? Why is it always assigned to a class?

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
George McKenzie
  • 95
  • 1
  • 2
  • 9
  • Everyone is explaining the difference between a class and an ID which I already know. My question is why are these themes using classes on elements which are only shown once. Cuberto gave the best answer which was pretty much that it could be used multiple times without me knowing, and it's a way to play it safe in case you need to use it again on a different page. – George McKenzie Nov 22 '13 at 08:00

6 Answers6

0

id is a unique one, but when class its not, you can you one for many selectors

ID's are unique

Each element can have only one ID
Each page can have only one element with that ID

Classes are NOT unique

You can use the same class on multiple elements.
You can use multiple classes on the same element.

Any styling information that needs to be applied to multiple objects on a page should be done with a class. Take for example a page with multiple "widgets":

Venu immadi
  • 1,585
  • 11
  • 20
0

Needs change often. An element/style that today you think will only be used once may be used multiple times in the future. Maybe you will have your logo more than one time on your site (for example, on your about us page). Perhaps you may eventually incorporate a second search bar. There are very few cases where you know with 100% certainty that the style will only be needed once.

Here's a good read on the subject: http://oli.jp/2011/ids/

sbking
  • 7,630
  • 24
  • 33
0

http://ryanfait.com/articles/the-difference-between-ids-and-classes/

Ryan says

"I take a different stance than most web designers when it comes to using ID's and classes. The vast majority of CSS coders use ID's for any elements that are simply used once on a page. However, I only use classes to style my websites, but, when I want to use an element in JavaScript, I use an identifier. From a presentational standpoint, styling elements with classes looks exactly the same as styling them with ID's, but the flexibility of classes offers a certain appeal even if I don't plan on using a class more than once on a page. Also, when I see an ID in my XHTML, it reminds me that there is some JavaScript that refers to that element. It's up to you, but so long as you implement classes and ID's properly, it is more or less a matter of personal choice when to utilize one or the other."

Nitin Varpe
  • 10,450
  • 6
  • 36
  • 60
0

There are some reasons why people prefer using classes instead of id's in CSS. (note that for javascript ID's are still commonly used).

  • The class element is re-usable on that page. This means that you won't have as much duplicated code with Classes as you would have with ID's.
  • Usually, IDs refer to something very specific, and abstracting would be tough
  • Any performance gains picked up by using id, is negated by adding any other selector to the left fo that id. Which mainly means that in most uses of id's you won't really have performance gains. (you could even have less performance than if you would just use a class)

Lecture about this:

Kristof Feys
  • 1,822
  • 1
  • 19
  • 36
0

If you're new to web development, just use the simple rule:

If you're trying to apply style to a HTML element, use a class.

If you're trying to interact with a HTML element with javascript, use an ID.

Mark Simpson
  • 2,344
  • 2
  • 23
  • 31
  • This might be a good rule of thumb for beginners... But classes are used often in JavaScript too. Often you will need to, for example, set an event handler on all elements with a given class. – sbking Nov 22 '13 at 07:47
  • @Cuberto Yes, of course you're right. – Mark Simpson Nov 22 '13 at 07:49
-1
  • You see more of classes because they can be reused and assigned to multiple elements.
  • However an id can belong to only one element at a time hence less of them.

Classes only appearing once: Such cases like the one you identified, you may call them semantically incorrect as id is more appropriate choice for that but still it would work and it probably happens couple of times that we get to use class which only appearing once (may be while defining that class we are thinking that we can use it somewhere also but at the end we really dont), beside general habit another reason could be:

That class styling is also used somewhere else along with another class for e.g.:

.logo{
    width:250px;
    height:250px;
    float:left;
}

.logo class is applied to logo <div class='logo'>...</div> But there is another element which also require same three properties of logo and some other also so one can reuse logo there also.

<div class='otherstyle logo'>...</div> this would apply the style of logo as well as otherstyle to it.

In some other words to sum it up. The cardinality of a class is 1...* so you can use it one and more than one time. But for id it is 1...1 you will and only use it only once.

SajjadHashmi
  • 3,795
  • 2
  • 19
  • 22