Over the years I’ve developed a love for making HTML and CSS as streamline as possible. Consider this piece of content for a very lean carousel. (You’d probably need more to actually make it work, but the point here is to show a principle of CSS, not to build a carousel.)

<div id="this_specific_thing" class="carousel">
<div class="slider_left">
	<a href="#" class="slide_left_button">Left</a>
</div> <!-- end of .slider_left -->
<div class="imagery">
	<!-- imagine a set of images here that build a carousel -->
</div> <!-- end .imagery -->
<div class="slider_right">
	<a href="#" class="slide_right_button">Right</a>
</div> <!-- end .slider_right -->
</div> <!-- end #this_specific_thing -->

The temptation here, for a lot of people, is to start declaring styles against #this_specific_thing. Sometimes that’s good, but if you ever want to reuse the carousel you’ll have to redeclare all your styles over again. In this case, you should be styling against .carousel instead.

I once knew a guy who would write these meticulous styles in crazy-deep stacks. His CSS files were massive because of it, and none of it was reusable. If you had a correction to one slider, you had to make it to every one.

Most of the time things aren’t that drastic. But there’s always a temptation when starting out to do something like this:

#content p {
	color: #333;
	font-family: "lucida grande", verdana, sans-serif;
	font-size: 14px;
	line-height: 1.4;
	margin: 10px 20px;
}
#aside p {
	color: #ccc;
	font-family: "lucida grande", verdana, sans-serif;
	font-size: 12px;
	line-height: 1.4;
	margin: 10px;
}

And while that may be exactly what you want, you can simplify your CSS like this:

 body {
	color: #333;
	font-family: "lucida grande", verdana, sans-serif;
	font-size: 14px;
	line-height: 1.4;
}
#content p {
	margin: 10px 20px;
}
#aside p {
	color: #333;
	font-size: 12px;
	margin: 10px;
}

And that’s the point of CSS, right? The fact that things cascade. But yet it seems that some people miss the real value of that. Whether you’re working with HTML, CSS, or JavaScript, always, always shoot for reusable pieces. Your life will be much easier because of it.