Indeed these features sounded so great that I used Sass in a recent project. Having reflected on that project though I have found that Sass’s features are unnecessary and won’t actually help you to write better code. If you want to write better code then the key is to write plain old CSS and use the principles described as Object Oriented CSS (OOCSS).

What is OOCSS?

OOCSS is an approach to writing CSS that results in smaller more focused classes which allow much more efficient code re-use. The two main principles of OOCSS are that you should separate structure and skin, and that you should separate container and content. If you’re not sure what OOCSS is about please read these great resources and then come back:

• Our Best Practices Are Killing Us
• An Introduction To Object Oriented CSS
• Object Orientated CSS

Features CSS Doesn’t Need

Variables

Variables allow you to specify widely used values in a single place and the re-use them throughout a stylesheet.

Sounds great, right?

No.

If you write your CSS correctly there should be no “widely used values” in your code. property: value pairs should not be repeated in your code. If you need to use variables then it is a sign that your code isn’t structured correctly.

Take the following Sass code:

$small: 12px;
.sidebar {
    background: #ccc;
    font-size: $small;
}
.permalink {
    border-top: 1px solid #ccc;
    color: #333;
    font-size: $small;
}

<div class="sidebar"></div>
<div class="permalink"></div>

The value 12px is used a number of times throughout the code, so we’ve taken that value and stored it as a variable. That way when we need to change the value we only need to change the value in a single place. We could do the same thing using CSS just by creating a new .small class:

.small {
    font-size: 12px;
}
.sidebar {
    background: #ccc;
}
.permalink {
    border-top: 1px solid #ccc;
    color: #333;
}

<div class="sidebar small"></div>
<div class="permalink small"></div>

This doesn’t seem like much of an improvement. But what if you want the comment count to appear small too? If you do this using your variable in Sass you’ll need to add another class:

$small: 12px;
.sidebar {
    background: #ccc;
    font-size: $small;
}
.permalink {
    border-top: 1px solid #ccc;
    color: #333;
    font-size: $small;
}
.comment-count {
    font-size: $small;
}

<div class="comment-count">3 comments</div>

Now, if you had created a specific .small class you wouldn’t actually need to modify your CSS at all. You could just use the existing rules.

.small {
    font-size: 12px;
}
.sidebar {
    background: #ccc;
}
.permalink {
    border-top: 1px solid #ccc;
    color: #333;
}

<div class="small">3 comments</div>

As you can see, if you need to use variables then your CSS is only going to get more and more complicated over time. However, if you use smaller classes to reduce the repetition of property: value pairs then your CSS becomes more flexible and less likely to grow out of control.

Mixins

Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes.

Like variables, mixins are unnecessary. If you need to use them it is a sign that your code is not structured correctly. Take the following Sass example for styling some buttons:

@mixin button($background: #333, $size: 16px) {
    background: $background;
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    font-size: $size;
    font-weight: bold;
    padding: 10px;
}
.button {
    @include button;
}
.submit-button {
    @include button(#0f0);
}
.small-button {
    @include button(#333, 12px);
}
.small-submit-button {
    @include button(#0f0, 12px);
}

<button class="button">Ordinary Button</button>
<button class="submit-button">Submit button</button>
<button class="small-button">Small button</button>
<button class="small-submit-button">Small submit button</button>

And then here is the same thing written using CSS:

.small {
    font-size: 12px;
}
.button {
    background: #333;
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    padding: 10px;
}
.submit-button {
    background: #0f0;
}

<button class="button">Ordinary Button</button>
<button class="button submit-button">Submit button</button>
<button class="button small">Small button</button>
<button class="button submit-button small">Small submit button</button>

In this example the pure CSS is smaller, easier to understand, and easier to maintain.

As you can see, by structuring your CSS correctly you can actually write much more terse code than you would using features like variables and mixins.

Advanced Features

Sass and LESS also have several advanced features such as mathematics and color manipulation. These features do have some benefits in terms of documenting your thought process in terms of design decisions, but if you want to document your thought process the real solution isn’t to throw mathematics or function calls into your CSS, but instead to use comments.

.nav {
    margin-bottom: $vertical-rhythm * 2;
}

.nav {
    margin-bottom: 36px; /* Twice the line-height of body text */
}

Problems

Setting up a Development Environment

Unlike CSS which works out of the box with any text editor or browser development tools, if you want to use a CSS preprocessor you will need to download some additional tools to get your development environment working. I haven’t found a text editor that plays nicely with Sass out of the box, and you also need to download a Firebug plugin to get Firebug looking at the correct files too.

This isn’t a huge problem, but when you’ve got to setup a development environment for a team of front-end developers, it’s just more steps that need to be documented and carried out to make sure everyone is able to work effectively.

The Problem with Preprocessors

This sounds basic, but I had a couple of problems where I’d make changes in my Sass files and the CSS rules weren’t being applied. The problem turned out being that the preprocessor was not running, so my changes to Sass files weren’t being applied to the compiled CSS files.

It’s not hard to remember to setup a CSS preprocessor to watch your stylesheets, but it’s just another thing that has to be done and another thing I might forget when I get into work in the morning. Being able to open my text editor and start coding without having to think about it is a very valuable thing.

Conclusion

While CSS preprocessors provide a lot of extra features on top of CSS, those features aren’t necessary if you write your code using the OOCSS approach.

What do you think? Are CSS preprocessors useful even if you use an OOCSS approach?

One of the biggest limitations of the previous version was that your menu was limited to 3 levels deep. The first thing I decided to change was to make the onfocus and onblur events call recursive functions, allowing you to have an infinitely deep menu and still have keyboard accessibility.

anchor.onfocus = function() { tabOn(this.parentNode); }
anchor.onblur = function() { tabOff(this.parentNode); }

…

function tabOn(li) {
	if(li.nodeName == 'LI') {
		li.className = addClass(li);
		tabOn(li.parentNode.parentNode);
	}
}

function tabOff(li) {
	if(li.nodeName == 'LI') {
		li.className = removeClass(li);
		tabOff(li.parentNode.parentNode);
	}
}

Beyond that the changes were mostly small. I moved the code to add and remove classes into their own functions, and generally cleaned up the code a little.

Also IE6 can’t deal with the > selector so I needed to add a stylesheet for IE6 to make the drop-down play nicely over a number of levels. If you want more of fewer levels you can modify this code to suit:

#nav li.hover ul ul,
#nav li.hover li.hover ul ul,
#nav li.hover li.hover li.hover ul ul,
#nav li.hover li.hover li.hover li.hover ul ul	{ margin-left: -9999px; }

#nav li.hover ul,
#nav li.hover li.hover ul,
#nav li.hover li.hover li.hover ul,
#nav li.hover li.hover li.hover li.hover ul	{ margin-left: 0; }

Having a seperate stylesheet for IE6 also allowed me to clean up the CSS a lot, so this version is quite a lot cleaner.

Check out the new and improved version of the code, along with an example of a horizontal dropdown: example.

You can grab the source and use or modify it however you like: JavaScript, CSS, IE6 CSS.

As always comments and questions are appreciated.

So, what we want to do here is put a background image in each of the four corners of the body. The mark-up we need:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Example: A background image in each corner</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
	</head>
	<body>
		<div id="outer_container">
			<div id="container">
			</div>
		</div>
	</body>
</html>

Unfortunately the extra DIVs are required as a hook for the background images, but we can reduce the number required down to two by using the HTML element and the BODY element as hooks for two of the images.

And the CSS:

*			{ margin: 0; padding: 0; }
html			{ background: #fff url(../images/top_left.gif) top left no-repeat; height: 100%; }
body			{ background: url(../images/top_right.gif) top right no-repeat; height: 100%; }
#outer_container	{ background: url(../images/bottom_left.gif) bottom left no-repeat; height: 100%; }
#container		{ background: url(../images/bottom_right.gif) bottom right no-repeat; min-height: 100%; _height: 100%; }

The only thing really to note is that _height: 100%; is a hack for IE6 to mimic the behaviour of min-height: 100%;, and will cause the stylesheet to fail validation. You can put that in an IE only stylesheet if that sort of thing bothers you.

Here is our working example. This technique has been tested to work in Firefox, Opera, Safari for Windows, IE7, and IE6.

Also, just as a note this technique can cause some freaky results when page-zoom is used in IE7, but to a lesser or greater extent this sort of thing will always choke a little in IE7 with page-zoom.

I was very familiar with the suckerfish menu, but it didn’t meet my needs to I decided to scrap it and start from scratch. So here I’ll go through what I came up with.

Our HTML structure is the standard nested list format that we all know and love:

<ul id="nav">
	<li>
		<a href="#">Home</a>
	</li>
	<li>
		<a href="#">News</a>
	</li>
	<li>
		<a href="#">Photos</a>
		<ul>
			<li>
				<a href="#">Reader Shots</a>
			</li>
			<li>
				<a href="#">Wallpapers</a>
				<ul>
					<li>
						<a href="#">800 x 600</a>
					</li>
					<li>
						<a href="#">1024 x 768</a>
					</li>
					<li>
						<a href="#">1280 x 1024</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">Photo Galleries</a>
			</li>
		</ul>
	</li>
	<li>
		<a href="#">Videos</a>
	</li>
	<li>
		<a href="#">Results</a>
		<ul>
			<li>
				<a href="#">National</a>
			</li>
			<li>
				<a href="#">International</a>
			</li>
		</ul>
	</li>
</ul>

Once we have our HTML structure the first thing we’re going to do is set the styles for how the menus should look when they’re expanded. In this case we’re going with some very simple styles, but you can make this as complicated as you like.

#nav,
#nav li ul				{ list-style: none; margin: 0; padding: 0; width: 150px; }
#nav li					{ padding: 0 3px 3px 0; position: relative; }
#nav li a				{ border: 1px solid #000; display: block; text-decoration: none; width: 145px; }

#nav li ul				{ left: 150px; position: absolute; top: 0; }
#nav li a				{ background: #fff; color: #000; }

Example 1: The basic structure for our menu, but no functionality yet

Now we have our menu in place we’ve got to get it acting like a dropdown. We’re using a negative margin-left to achieve this, and then setting the margin to 0 when the list item is hovered over:

#nav li:hover ul li ul,
#nav li ul				{ margin-left: -9999px; }

#nav li ul li ul,
#nav li:hover ul,
#nav li ul li:hover ul			{ margin-left: 0; }

#nav li a,
#nav li:hover ul li a,
#nav li ul li:hover ul li a		{ background: #fff; color: #000; }

#nav li:hover a,
#nav li a:hover,
#nav li ul li:hover a,
#nav li ul li a:hover,
#nav li ul li:hover ul li:hover a,
#nav li ul li:hover ul li a:hover	{ background: #000; color: #fff; }

Example 2: Basic CSS Dropdown Menu

The next step is to make it keyboard accessible in modern browsers (everything except IE). We can do this by using a combination of the :focus pseudo class and the + combinator to provide some basic keyboard functionality. It isn’t relevant yet, but I’ve seperated selectors using the + combinator from other selectors because IE6 ignores all of the selectors in a list if one is using the + combinator.

#nav li:hover ul li ul,
#nav li ul				{ margin-left: -9999px; }
#nav li a:focus + ul li ul		{ margin-left: -9999px; }

#nav li ul li ul,
#nav li:hover ul,
#nav li ul li:hover ul,
#nav li.hover ul li a:focus,
#nav li ul li.hover ul li a:focus	{ margin-left: 0; }
#nav li a:focus + ul,
#nav li ul li a:focus + ul		{ margin-left: 0; }

#nav li a,
#nav li:hover ul li a,
#nav li ul li:hover ul li a		{ background: #fff; color: #000; }

#nav li:hover a,
#nav li a:hover,
#nav li a:focus,
#nav li a:active,
#nav li ul li:hover a,
#nav li ul li a:hover,
#nav li ul li:hover ul li:hover a,
#nav li ul li:hover ul li a:hover	{ background: #000; color: #fff; }

#nav li ul li a:focus,
#nav li ul li ul li a:focus		{ margin-left: 9999px; }

As you can see in our example page there is a lot to be desired for keyboard users, but it’s a good start. We will use JavaScript to provide better usability for keyboard users, but we’ll get to that later.

Example 3: CSS-based dropdown menu that is keyboard accessible in modern browsers

If you’ve had a look at any of these examples in IE6 you probably will have seen that the menu doesn’t work. At all. We need to use JavaScript to fix our IE6 issues, so while we’re at it let’s add some usability aids, such as a mouse-off delay.

All of this is done by the function below. It is completely parameterised so you can apply it to any number of dropdown lists and change the timing, etc.

//	dropDownId	string	ID of the UL containing the drop down
//	hoverClass	string	Class to be applied to the LIs on mouse over
//	mouseOffDelay	int	Delay from when the mouse is lifted from the drop down until hoverClass is removed (in milliseconds)
function drop_down(dropDownId, hoverClass, mouseOffDelay) {
	if(dropDown = document.getElementById(dropDownId)) {
		var listItems = dropDown.getElementsByTagName('li');
		for(var i = 0; i < listItems.length; i++) {
			listItems[i].onmouseover = function() {
				this.className += ' ' + hoverClass;
			}
			listItems[i].onmouseout = function() {
				var that = this;
				setTimeout(function() {
					that.className = that.className.replace(hoverClass, "")
				}, mouseOffDelay);
				this.className = that.className;
			}
		}
	}
}

And we call the function like so:

drop_down('nav', 'hover', 250);

In our examples we have used Simon Willison’s great Add Load Event function to call the function on page load, however you can use any method you like.

Now we need to change our CSS to use our new .hover class:

#nav li:hover ul li ul,
#nav li ul,
#nav li.hover ul li ul			{ margin-left: -9999px; }
#nav li a:focus + ul li ul		{ margin-left: -9999px; }

#nav li.hover ul,
#nav li ul li ul,
#nav li ul li.hover ul,
#nav li:hover ul,
#nav li ul li:hover ul,
#nav li.hover ul li a:focus,
#nav li ul li.hover ul li a:focus	{ margin-left: 0; }
#nav li a:focus + ul,
#nav li ul li a:focus + ul		{ margin-left: 0; }

#nav li a,
#nav li:hover ul li a,
#nav li.hover ul li a,
#nav li ul li:hover ul li a,
#nav li ul li.hover ul li a		{ background: #fff; color: #000; }

#nav li:hover a,
#nav li.hover a,
#nav li a:hover,
#nav li a:focus,
#nav li a:active,
#nav li ul li:hover a,
#nav li ul li.hover a,
#nav li ul li a:hover,
#nav li ul li:hover ul li:hover a,
#nav li ul li.hover ul li.hover a,
#nav li ul li:hover ul li a:hover	{ background: #000; color: #fff; }

Example 4: JavaScript enhancements allow IE6 users to use the menu and adds a usability improvement

The final piece of the puzzle is to make our menu keyboard accessible for all browsers and more usable to-boot. We do this by mimicking the effect of hovering of a list-item when you are focused on it’s child anchor. Inside our loop we’ll insert the following piece of script:

var anchor = listItems[i].getElementsByTagName('a');
anchor = anchor[0];
anchor.onfocus = function() {
	if(this.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName == 'LI') {
		this.parentNode.parentNode.parentNode.parentNode.parentNode.className += ' ' + hoverClass;
	}
	if(this.parentNode.parentNode.parentNode.nodeName == 'LI') {
		this.parentNode.parentNode.parentNode.className += ' ' + hoverClass;
	}
	if(this.parentNode.nodeName == 'LI') {
		this.parentNode.className += ' ' + hoverClass;
	}
}
anchor.onblur = function() {
	if(this.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName == 'LI') {
		this.parentNode.parentNode.parentNode.parentNode.parentNode.className = this.parentNode.parentNode.parentNode.parentNode.parentNode.className.replace(hoverClass, "");
	}
	if(this.parentNode.parentNode.parentNode.nodeName == 'LI') {
		this.parentNode.parentNode.parentNode.className = this.parentNode.parentNode.parentNode.className.replace(hoverClass, "");
	}
	if(this.parentNode.nodeName == 'LI') {
		this.parentNode.className = this.parentNode.className.replace(hoverClass, "");
	}
}

This script finds the first anchor and assigns onfocus and onblur events to it (the keyboard equivalent to onmouseover and onmouseout, except that it can only be applied to focusable elements i.e. links and form controls).

When we tab onto a link we want to assign our hoverClass to the anchors parent LI, and depending how deep it is we want to apply hoverClass to it’s great grandparent LI and it’s great great great grandparent LI. This allows us to style all of it’s parents, helping to give keyboard users a better indication of where they are.

Example 5: Final JavaScript enhancements make the menu more accessible to keyboard users on all browsers

Please grab the finished CSS and JavaScript files.

Check out the finished product, kick the tyres, and let me know what you think. Feel free to use abuse and modify as you need. Attribution is always appreciated.