Which should I use when laying out my CSS website, Classes or IDs?

Posted June 13, 2005

Since I began learning about the intricate but rewarding in’s and out’s of CSS, I have been researching sites that have use it. I notice that there are many sites that use “ID” selectors to define a class for block level div element. I have wondered why that is, why they don’t use a “class” instead, but haven’t been able to say why one way would be more or less better than the other.

For example, you may have your main container, which is commonly called the “wrapper” defined either of these two ways;

<div class=”wrap”></div>

<div id=”wrap”></div>

But now I do have a good reason. I have recently figured out a good technique for testing a fully CSS layout. I will digress and admit that Dreamweaver does a decent job of rendering the complex CSS in the design view of the program. But it still is not very accurate, and when it comes down to it, you have to be able to analyze the problems on a website with only your knowledge at hand. Where, coming from a design background, this was much easier to see in Dreamweaver using a table layout.

I have found myself defining to styles in my style sheets, and although they are only used for testing and the real CSS loyalists say that keeping them in the stylesheet defeats the whole purpose of being concise, I leave them anyway for future use. This is usually what I define;

.border{

border:1px solid #000;

}

.background{

background-color:#000;

}

Basically these set classes for a solid 1 pixel black border, and a solid background color of black. That way, I am able to easily apply these styles as a double class to an existing class to help me test and visually see what is going on and where I need to fix my problem. Most of the time it is related to floats and clear issues. This is what the example with the wrapper would look like with my border class;

<div class=”wrap border”></div>

But, when you use an “ID” you cannot define a double class. I actually knew this, but had never really paid close attention until I tried to add a second class and everything messed up and I couldn’t figure out why. This is the big no no;

<div id=”wrap border”></div>

Now, granted, I learned this the middle of last month, and I have since found out about the “Web Developer” extension for Firefox, which I wrote about in my browser section. This allows you to draw borders around all block elements. But this doesn’t solve the same testing issue in IE, or Opera.

So, for that reason, I would recommend using “Classes”. If for nothing else, to make your life easier when testing out your beautiful CSS website.