Good tutorial explaining ID and Class

Hi,

I think I have a pretty good idea of how to use a class, but I'm still fuzzy when it comes to ID's. I've read some things that say ID's have a higher rating (100's column), which I understand, but I've read some other things that make my head spin. Anybody have a good link that clearly explains the difference and when to use them? Also, I've seen combinations in declarations such as:
ID# .class I assume this means this class is a child of this ID, but why do I need that? Why is it written that way?

Thanks.

Robert

 

ID's are meant to be unique - and if you take care there's only REALLY one reason to use them instead of classes in most cases - if you plan on targeting something directly with javascript's 'getElementByID' function.

Otherwise the only thing you really need to know about ID's is you can use them only once per page, and that anything you put in them for CSS will overrride anything declared by other means. It's source order > tag > tagsuedo > tag.class > tag#ID in that order of precedence.


As to the #ID .class form, take this example:

<ul id="menu">
<li class="current"><a href="#">Home</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">FAQ</a></li>
</ul>

#menu {
list-style:none;
}

#menu li {
background:#CCC;
}

#menu .current {
background:#888;
}

Give that a shot. the .current class let's use target just the one that should appear different.

One of my own 'rules' whenever adding a class is to ask myself 'does this REALLY need a class, or can I target the tag directly. Take your typical 'article' on a page. Selecting children can really make it simpler.

<div class="article">
<h2>Article Title <span class="date">today</span></h2>
<div class="content">
<p>Whole bunch of text here.</p>
<p>Whole bunch of text here.</p>
<p>Whole bunch of text here.</p>
</div>
<div class="author">By Me!</div>
</div>

I would target:
.article h2 (since there might be other h2's)
.article .date
.article .content
.article .author

Why target all those specifically instead of just .date, .content, .author? Because you might have OTHER outer classes besides .article... like say .news.

This way, you could set any shared properties via .date, .content, etc... but target .news .date, .news.content as well as .article .date, .article .content

Why not just make them all unique classes like .news_date or .content_date? First, you might want to share appearance items to reduce code. Second, if the short version is the proper name for it, use the proper name by itself and save a few bytes of code.

Modularity - the cornerstone to clean minimalist code.

 

One could argue that in deathshadow's example that the classname in the SPAN nested inside the H2 could be axed, but that's only recommended if the person who coded the page will be responsible for its maintenance.

 

Quite correct.

".article h2 span" instead of ".article .date" on the CSS side.

I'll often use unclassed spans for visual styling the presentational parts, but if there's something uniform and meaningful like date, I'll use the class just for clarity (sure beats wasting a comment on it)