Use the cascade — On using CSS sensibly — CSS Wizardry Toybox — CSS, Web Standards, Typography, Grids and now HTML5

Use the cascade — On using CSS sensibly

The Cascade
Specificity
Summary

Many times I see people of all skill levels making poor use of the first ‘C’ in CSS; cascading. Furthermore, a constant underuse of specificity is apparent in a lot of developers’ work.
While this isn’t wrong per se, it doesn’t make best use of CSS’s primary attribute/purpose, and can cause unecessary workload and coding for the developer. It also makes projects harder to maintain over a long enough time frame — an ever growing list of class names used to target what could have been caught by the cascade and specificty automatically.

Using the cascade

It is much easier to illustrate this with examples, so take the following:

Markup:

<div id="footer">
	<h4>Friends</h4>
	<ul class="footer-links">
		<li><a href="http://friendone.com/">Friend One</a></li>
		<li><a href="http://friendtwo.com/">Friend Two</a></li>
		<li><a href="http://friendtrhee.com/">Friend Three</a></li>
		<li><a href="http://friendfour.com/">Friend Four</a></li>
	</ul>
	<h4>Resources</h4>
	<ul class="footer-links">
		<li><a href="http://resourceone.com/">Resource One</a></li>
		<li><a href="http://resourcetwo.com/">Resource Two</a></li>
		<li><a href="http://resourcetrhee.com/">Resource Three</a></li>
		<li><a href="http://resourcefour.com/">Resource Four</a></li>
	</ul>
</div>

CSS:

#footer{
	width:100%;
	clear:both;
	…
}
.footer-links{
	width:48%;
	float:left;
	…
}

Here you have a series of lists in the footer pointing out to different sites. Each ul has a class of class="footer-links" applied to it. This is all well and good, and does work, but it would be far better to have:

Markup:

<div id="footer">
	<h4>Friends</h4>
	<ul>
		<li><a href="http://friendone.com/">Friend One</a></li>
		<li><a href="http://friendtwo.com/">Friend Two</a></li>
		<li><a href="http://friendtrhee.com/">Friend Three</a></li>
		<li><a href="http://friendfour.com/">Friend Four</a></li>
	</ul>
	<h4>Resources</h4>
	<ul>
		<li><a href="http://resourceone.com/">Resource One</a></li>
		<li><a href="http://resourcetwo.com/">Resource Two</a></li>
		<li><a href="http://resourcetrhee.com/">Resource Three</a></li>
		<li><a href="http://resourcefour.com/">Resource Four</a></li>
	</ul>
</div>

CSS:

#footer{
	width:100%;
	clear:both;
	…
}
#footer ul{
	width:48%;
	float:left;
	…
}

Now this may not always work, but wherever possible it is better to use a parent element as a ‘hook’ and use the cascade to target any elements occuring within it. Another good application of this would be:

Markup:

<div id="header">
	<h1 id="logo">CSS Wizardry</h1>
</div>

CSS:

#header{
	width:100%;
}
#logo{
	…
	[styles]
	…
}

Because the h1 occurs just once in the header div this could be much better written as:

Markup:

<div id="header">
	<h1>CSS Wizardry</h1>
</div>

CSS:

#header{
	width:100%;
}
#header h1{
	…
	[styles]
	…
}

Although only slightly, this trims the markup down and uses the cascade more than before, which was not using it at all. Applying this practice site-wide should make much better use of code and leave the site more maintanable. It may take a while to get used to but trying to stick to it will promote much better semantics, CSS and coding in general.

Specificity

Another great development practice is to define one ‘master’ class to craft a larger, more generic style, and use the same class and specificity to make more specific alterations on a per-element basis. A prime example is the following:

.left{
	float:left;
}
.image-left{
	float:left;
	margin:0 10px 10px 0;
}
.blockquote-left{
	float:left;
	width:280px;
	margin:0 10px 0 -30px;
}

The above CSS can and should be:

.left{
	float:left;
}
img.left{
	margin:0 10px 10px 0;
}
blockquote.left{
	width:280px;
	margin:0 10px 0 -30px;
}

This reduces the number of class names from three to one, and the number of lines of code from 12 to 10. This may not sound like a great deal but it does mean that there are less extraneous class names (to remember) in your markup and CSS, and over a full stylesheet the difference is definitely noticable.

Summary

By adopting some simple new practices and using sensible conventions you can let your code do all the hard work for you. Also, properly utilising the cascade and specificity means that your builds will be more scalable and more likely to ’sort themselves out’ as they expand.

CSS Wizardry Use the cascade — On using CSS sensibly

[Content]