IDs vs Classes
CSSI got asked a simple question today that I honestly didn't know the answer too.
Bob: When using a particular style, are there any advantages over using CLASS vs. ID?
Me: I'm not sure what the differences between class and ID are to be honest, I always use class.
Not knowing the answer to a simple question like that often bothers me so I need to find the answer. A quick Google search lead me to tizag.com and this tutorial.
The whole tutorial gets summed up pretty well in the last line:
Use IDs when there is only one occurence per page. Use classes when there are one or more occurences per page.
How do you all use IDs vs Classes?
Good Day!
Ryan
fro said:
I mainly use classes to apply my styles for a couple reasons.
1 - As you said above, an ID can apply to only one element on a page. I'll use IDs for style if I have a special element that I know will only appear once.
2 - You can apply multiple classes to a single element. This can be very helpful in cutting down your CSS.
1 - As you said above, an ID can apply to only one element on a page. I'll use IDs for style if I have a special element that I know will only appear once.
2 - You can apply multiple classes to a single element. This can be very helpful in cutting down your CSS.
John Allen said:
YO Ryan!
I think it is good to think of IDs as "Single Parents", ie: sideBarNavigation, sideBarCalander, header, footer, centerContentMain bla.. bla... bla. Then standard mark up and classes belong to these parents.
Thinking of HTML as larg sectional things (id's) with children, produces code that is good for search engines, good for Screen Readers, and even better SUPER easy to code and understand.
example:
<div id="sideBarNavigaion">
<ul>
<li>Menu Item A</li>
<li>Menu Item B</li>
<li>Menu Item C</li>
<li>Menu Item D</li>
</ul>
</div>
<div id="contentMain">
<h1>Header Title</h1>
<h2>Sub Title</h2>
<p>Content.</p>
<p>Content.</p>
</div>
<div id="footer">
<h3>Link A | Link B | Link C</h3>
</div>
The code above is easy to understand and super easy to output with CF and maintain later on.
If I find myself writting a lot of .someClass and am using lots of nested #someID I stop, look at the display data and try to refacotr so i am using standard HTML tags in well defined id's.
I read alot of CSS stuff, and lots of people miss how cool css can be. Just think, one ID can give you a whole subset of styles with no special classes to look at, that is the cool part of cascading part. I also think that thinking this was make for WAY more maintainable code.
Last point about css, just cause I have really looked into it and have needed to be more formilized, .css files, this helped me out a LOT when i saw it this way:
#content {margin:0; padding:0px 10px 0xp 10px; font-family:arial;}
#content h1 {font-size:1.25em;}
#content h2 {font-size:1em;}
#content p ul li a {font-size:.80em;}
#content ul li a {text-decoration:underline;}
Also this way your .css file is really easy to read.
oxoxox
ja
I think it is good to think of IDs as "Single Parents", ie: sideBarNavigation, sideBarCalander, header, footer, centerContentMain bla.. bla... bla. Then standard mark up and classes belong to these parents.
Thinking of HTML as larg sectional things (id's) with children, produces code that is good for search engines, good for Screen Readers, and even better SUPER easy to code and understand.
example:
<div id="sideBarNavigaion">
<ul>
<li>Menu Item A</li>
<li>Menu Item B</li>
<li>Menu Item C</li>
<li>Menu Item D</li>
</ul>
</div>
<div id="contentMain">
<h1>Header Title</h1>
<h2>Sub Title</h2>
<p>Content.</p>
<p>Content.</p>
</div>
<div id="footer">
<h3>Link A | Link B | Link C</h3>
</div>
The code above is easy to understand and super easy to output with CF and maintain later on.
If I find myself writting a lot of .someClass and am using lots of nested #someID I stop, look at the display data and try to refacotr so i am using standard HTML tags in well defined id's.
I read alot of CSS stuff, and lots of people miss how cool css can be. Just think, one ID can give you a whole subset of styles with no special classes to look at, that is the cool part of cascading part. I also think that thinking this was make for WAY more maintainable code.
Last point about css, just cause I have really looked into it and have needed to be more formilized, .css files, this helped me out a LOT when i saw it this way:
#content {margin:0; padding:0px 10px 0xp 10px; font-family:arial;}
#content h1 {font-size:1.25em;}
#content h2 {font-size:1em;}
#content p ul li a {font-size:.80em;}
#content ul li a {text-decoration:underline;}
Also this way your .css file is really easy to read.
oxoxox
ja
Loading....