Why do I want to write class independant of my selectors?

Posted July 13, 2005

This isn’t a rule you apply to every element, instead it is based on situation. As you get in depth into CSS, it is very useful to have certain classes only able to be applied to certain elements. But for your main block level containers, the containers that hold all your HTML page content from words to images, I prefer to leave them independant for one reason only, testing.

When I am trying to root out a problem, that generally stems back to some clearing issue, I will add my “border” style that I talked about
setting up in last month’s article solely for testing. If you are going through, testing your site, by adding a double class, trying to find the boundaries of the container and how they are acting with a border around it like so;

<div class=”wrapper border”>

You can’t have a double class applied to a selector specific class. Wow. That was a mouthful. Basically, by saying;

div.wrapper

If you apply any other class to that div element, it no longer will be valid and won’t display correctly. This is what I those two styles might look like;

.wrapper{

margin:0 auto;

width:760px;

text-align:center;

}

.border{

border:1px solid #000;

}

When I setup my class above, basically what I am doing is defining my main wrapper class, and telling it, “Hey, also add a border around it
to this specific instance.”