Jump to content


Photo

Class vs. ID


  • Please log in to reply
9 replies to this topic

#1 johnnyk

johnnyk
  • Members
  • PipPipPip
  • Advanced Member
  • 126 posts

Posted 05 July 2006 - 11:07 PM

I've always used classes for everything, but I read that you should use and ID if you're only going to use it once. Is there really any benefit to using an ID (considering it would work with a class also).
Rediscover the Web:
<a href="http://www.spreadfir...;t=219"></a><br />

#2 moberemk

moberemk
  • Members
  • PipPipPip
  • Advanced Member
  • 695 posts

Posted 06 July 2006 - 02:10 AM

IDs have a higher specificity rating, making them overrulling over classes. So when you give something a class and an ID, the ID's rules come first.
Disclaimer: No matter how harsh I may be, I'm always IMO only.

#3 Daniel0

Daniel0
  • Staff Alumni
  • Advanced Member
  • 11,956 posts

Posted 07 July 2006 - 11:48 AM

I believe IDs have to be unique in order to have valid XHTML (possibly HTML too). So imagine a forum system, where each post row has an ID called 'postrow', that would not make the ID unique, so you'd have to use the classes instead.

#4 ShogunWarrior

ShogunWarrior
  • Members
  • PipPipPip
  • Advanced Member
  • 528 posts
  • LocationIreland

Posted 09 July 2006 - 03:02 PM

ID are good/neccessary when: parsing, using Javascript, CSS stuff etc.

For instance to highlight a row you'd need the ID of that table row.

Also, it is better for styling, like:
<tr>
<td class="box" id="left"> </td>
<td class="box" id="center"></td>
<td class="box" id="right"></td>
</tr>


Because you've used class and id you can now assign all the boxes styles, and then tweak each specific one.
<a href="http://www.daviddora...nmedia.com/">My New Site/Blog</a> | <a href="http://www.daviddora...m/check/">Check your page for broken links/images/scripts</a>

Zend Certified Engineer
Follow me on Twitter: http://twitter.com/davidd

#5 Daniel0

Daniel0
  • Staff Alumni
  • Advanced Member
  • 11,956 posts

Posted 09 July 2006 - 03:22 PM

Yeah, but according to W3C all ids have to be unique in order to be valid XHTML:

An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).


So you could just use an id attribute on things you know you will be using javascript on.

#6 WendyLady

WendyLady
  • Members
  • PipPipPip
  • Advanced Member
  • 38 posts

Posted 10 July 2006 - 09:08 PM

Hmmmm -- I'm surprised no one has said this before:

A class definition can be used many times on a single page -- for example, a paragraph or a span can have the class .bold and this can be used throughout the page, many times.  It is typically a more general style.

An ID definition is more restrictive, and each ID should only appear once on a page.  An example of this is #submenu --> or using the id="current" for navigation, to show which page a person is on.  There is only going to be one submenu on the page with this style, or only one tab can be "current".  If you use IDs multiple times, you can get interesting results in different browsers.

Introduction to IDs vs. Classes:
http://www.tizag.com/cssT/cssid.php

Uses the id="current" for navigation (classic tutorial):
http://alistapart.co...s/slidingdoors/

Lots & Lots of General Help on CSS:
http://www.w3.org/Style/CSS/learning

#7 awesty

awesty
  • New Members
  • Pip
  • Newbie
  • 7 posts

Posted 11 July 2006 - 10:59 AM

so what is the point in using id's when you can only use them once when you could easily forget you have already used it and muck up ???

i alway use classes, but sometime use id's for no particular reason other than doing stuff differently :P

#8 moberemk

moberemk
  • Members
  • PipPipPip
  • Advanced Member
  • 695 posts

Posted 11 July 2006 - 12:25 PM

IDs have a higher specificity rating, making them overrulling over classes. So when you give something a class and an ID, the ID's rules come first.

Also, Javascript can only call ID's, unless you use the Prototype Library's dollar function.
Disclaimer: No matter how harsh I may be, I'm always IMO only.

#9 Daniel0

Daniel0
  • Staff Alumni
  • Advanced Member
  • 11,956 posts

Posted 11 July 2006 - 02:54 PM

Hmmmm -- I'm surprised no one has said this before


Look at the post above yours... ;)

#10 obsidian

obsidian
  • Staff Alumni
  • Advanced Member
  • 3,202 posts
  • LocationSeattle, WA

Posted 11 July 2006 - 03:08 PM

For instance to highlight a row you'd need the ID of that table row.


no necessarily. there are many other ways to reference a specific object (by name, element, etc). however, using the getElementById() function is definitely the easiest way. in fact, you could use javascript to cycle through and pull all the rows on a page of a specific style if you wanted to as well. it would take a bit more coding, but it's possible.

all that to say, i think that the principles behind some of the posts above are the biggest benefits to you: keep in mind that if it's a major section of your page (header, content, navigation, footer, etc), you need to use an ID (for reasons mentioned above). But, on the other hand, if you are wanting to assign styles that may be used more than once, by all means, use a class so you can assign the attributes wherever you'd like. also, keep in mind that each element can have multiple classes, but only one ID as well.
You can't win, you can't lose, you can't break even... you can't even get out of the game.

<?php
while (count($life->getQuestions()) > 0)
{   $life->study(); } ?>
  LINKS: PHP: Manual MySQL: Manual PostgreSQL: Manual (X)HTML: Validate It! CSS: A List Apart | IE bug fixes | Zen Garden | Validate It! JavaScript: Reference Cards RegEx: Everything RegEx




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users