which is better to use "id=" or "ul=" ??????????????????????

[CowGirl]

Hello,

I have been using elance contracts to design the more complex css elements of my website (the simple stuff I can do) and am a bit perplexed by one question.

Every contractor uses something like this:
<ul id="navbar">
<li></li>
</ul>
And not something like this:
<ul class="navbar">
<li></li>
</ul>

I thought that an "id=" cannot be attached to the same css rule more than once on the same page due to stability issues. For example, you could only use id="navbar" once on the same page, but could use class="navbar" repeatedly on the same page.

Thus, I have been switching the id="navbar" to class="navbar". Both seem to work and using class="navbar" means I can use a css rule repeatedly on the same page and not have to create two css rules that are the same but with different names to use them on the same page - reducing my css file size.

But the fact the elance contractors, who know more about css than me, are all using "id=" causes me to question is they are doing so for a good reason. Does anybody know the anwser?

Thank you!!!!!!!!!!!!!!

[cbVision]

You're correct in using class here.

I typically try to use class whenever possible and use ID's when I need to target very specific things for JavaScript targeting. For example, I may have a submit payment button. I want it to use the default button class I have set up, but I also want it to do something special in jQuery. I'd have my HTML set up like this:

<a class="button" id="btn-submit-payment">Submit Payment</a>

I wouldn't put any CSS for the #btn-submit-payment. All the CSS would be on the button class and can be used for anything. I would however target this element in Javascript to handle some onclick action. Here's an example of how I'd use it in jQuery:

$('#btn-submit-payment').click(function(){
  // function to make the button submit the payment
});

I would not want to use the class because it would execute this function for all elements with the button class. For example:

$('.button').click(function(){
  // cannot put the submit payment stuff here
});

So, to sum things up, I like using ID's when I need to use JavaScript for unique events and I try to always use classes for CSS. Some people may argue that using IDs such as #navbar will target faster than .navbar ... making the code run faster. I recall reading a study that tested this theory and the results didn't seem to make a difference.

[joke]

I totally agree with your usage, an ID should be used only once a page (cause if you call something by it's ID you want that one specific item you identified with your ID to answer) and class can be used more often (although you can also use it once).

On the other hand, why would you want to use a navbar more than once on the page?

[tracknut]

I thought that an "id=" cannot be attached to the same css rule more than once on the same page due to stability issues.

By the way, it isn't "... due to stability issues". It's the way ID's (think of them as a noun) and classes (think of them as an adjective) are supposed to work.

Dave

[CowGirl]

Thank you all for your helpful explanations!

Joke, I only used "navbar" as an example and would not use "navbar" more than once on the page to avoid any confusion, given my pages only have one navbar.

[cbVision]

One case a navbar could be used multiple times is for navigation/options pertaining to certain sections.

For example:

<div>
	<ul class="navbar">
		<li><a href="#">Print</a></li>
		<li><a href="#">Email</a></li>
		<li><a href="#">Share</a></li>
	</ul>
	<h2>Section Heading</h2>
	<p>Section Content</p>
</div>
<div>
	<ul class="navbar">
		<li><a href="#">Print</a></li>
		<li><a href="#">Email</a></li>
		<li><a href="#">Share</a></li>
	</ul>
	<h2>Section Heading 2</h2>
	<p>Section Content 2</p>
</div>
<div>
	<ul class="navbar">
		<li><a href="#">Print</a></li>
		<li><a href="#">Email</a></li>
		<li><a href="#">Share</a></li>
	</ul>
	<h2>Section Heading 3</h2>
	<p>Section Content 3</p>
</div>

[tracknut]

Or maybe they need to be styled differently in the different areas of the page:

<div>
	<ul class="navbar top">
		<li><a href="#">Print</a></li>
		<li><a href="#">Email</a></li>
		<li><a href="#">Share</a></li>
	</ul>
	<h2>Section Heading</h2>
	<p>Section Content</p>
</div>
<div>
	<ul class="navbar middle">
		<li><a href="#">Print</a></li>
		<li><a href="#">Email</a></li>
		<li><a href="#">Share</a></li>
	</ul>
	<h2>Section Heading 2</h2>
	<p>Section Content 2</p>
</div>
<div>
	<ul class="navbar bottom">
		<li><a href="#">Print</a></li>
		<li><a href="#">Email</a></li>
		<li><a href="#">Share</a></li>
	</ul>
	<h2>Section Heading 3</h2>
	<p>Section Content 3</p>
</div>