CSS - ID's and Classes

Slime101 · 28 Feb 2006 at 14:16

When should one use ID's and when should you use Classes?

Beansprout · 28 Feb 2006 at 14:18

ID is unique, class is not - so for example, <div id="header"> as opposed to <div class="box">. There's only one header on a page, but there could be lots of boxes

Slime101 · 28 Feb 2006 at 14:21

cool ta

roboffer · 28 Feb 2006 at 14:35

Thats pretty much it, also you can give some meaning through using ids in you css - so if someone else sees a style defined for an id in your css, they know that that element should only appear once on a page.

Augmented · 28 Feb 2006 at 19:38

The nature of IDs as unique identifiers means they're also incredibly useful for interacting with specific elements of a page. Examples being (for an element with id "contact"):

Using a fragment identifier in a URL - www.example.com/details.htm#contact.
Accessing an element through the DOM with scripting - Javascript's getElementById('contact') function.

robmiller · 28 Feb 2006 at 19:52

Although don't feel obliged to litter your code with unnecessary IDs if you just want to access the elements via Javascript; instead, use something like Simon Willison's getElementsBySelector() to select the element(s) via a CSS selector. So, with the markup:

Code:

<div id="header">

<h1>Title</h1>

<ul>
    <li>lalala</li>
    <li><a href="#">lol</a></li>
</ul>

</div>

You don't need to add an otherwise unnecessary ID to the <ul> to access it via Javascript, you can access it just as you would with CSS:

Code:

var nav = document.getElementsBySelector('#header ul');

Leaner markup + unobtrusive Javascript = Lovely

paulsheff · 28 Feb 2006 at 20:12

You usually get validation errors with multiple uses of the same id.

Al Vallario · 28 Feb 2006 at 20:16

paulsheff said:
You usually get validation errors with multiple uses of the same id.

You always do, because it is an error

Augmented · 28 Feb 2006 at 23:36

robmiller said:
Although don't feel obliged to litter your code with unnecessary IDs if you just want to access the elements via Javascript; instead, use something like Simon Willison's getElementsBySelector() to select the element(s) via a CSS selector.

While the function's great, it's got limited scope. With just descendant and attribute support, what happens if you have more than one list element and you want to only want to access one particular list - which do you pick out of the array? Or what happens when you move that particular list to a different part of the page?

If an element needs to be targeted, then use an ID, that is the purpose of the attribute. No point avoiding an ID for the sake of a few bytes. Personally I'd feel in many scenarios that the initial overhead of a 6KB+ script is worse than adding an ID where it's actually appropriate

.

paulsheff · 1 Mar 2006 at 01:01

Al Vallario said:
You always do, because it is an error

Haha and there was me trying to be conservative with the truth.