Let’s move beyond simply linting our code, and delve into creating a visual outline of our CSS. Anyone who writes code, anything from simple UI shifts through complex exotic joins, inherits a responsibility to write reasonable code. Good code solves a problem or answers a question; well-written code lives on, open and accessible to future developers.

Before we begin, let me say that the delivered stylesheet should be minified and free of excess spaces, tabs, semicolons and lengths of 0px instead of “0″, using tools like the YUI compressor or the CSS Drive Online CSS Compression Utility.

I have read and been part of many discussions about the format of a CSS document. I happen to prefer to keep my declarations line-separated, alphabetized within contextually appropriate groups. I also like to keep the entire ruleset on one line, unless the ruleset is too long (I know, that’s subjective, but it is my blog).

Recently, though, I’ve had to work on some interesting and complex designs. As the DOM depth grew, I found myself getting lost in my own HTML. The solution, for me, was a simple one, both easy to implement and easy to back out of (especially when using the tools listed above).

My CSS formatting rules were category based:

  1. Reset CSS, if necessary/desired (note, I don’t always use a full reset library)
  2. HTML declarations
  3. ID rules
  4. class rules

Beyond that, I found my formatting rules lacking. Last-in mental flow within category left me lost and confused. To buttress my existing formatting rules, I adopted a visual outline in my stylesheet that matched the indent rules of my HTML. For example, the following HTML:

<div id="nav">
   <ul>
      <li><a href="#" title="some local navigation link">Navigation Item 1</a></li>
      <li><a href="#" title="some local navigation link">Navigation Item 2</a></li>
      <li><a href="#" title="some local navigation link">Navigation Item 3</a>
         <ul>
            <li><a href="#" title="some local navigation link">Sub-Navigation Item 1</a></li>
            <li><a href="#" title="some local navigation link">Sub-Navigation Item 2</a></li>
            <li><a href="#" title="some local navigation link">Sub-Navigation Item 3</a>
         </ul>
      </li>
      <li><a href="#" title="some local navigation link">Navigation Item 4</a></li>
      <li><a href="#" title="some local navigation link">Navigation Item 5</a></li>
      <li><a href="#" title="some local navigation link">Navigation Item 6</a></li>
   </ul>
</div>

Would be supported by this CSS:

#nav {border:1px solid #ccc;}
	#nav ul {list-style-type:none;margin:0;padding:0;}
		#nav ul li {display:inline;list-style-type:none;margin:0;padding:0;}
		#nav ul li:hover {position:relative;}
			#nav ul li a {display:inline-block;color:#000;padding:4px 12px;text-decoration:none;}
			#nav ul li a:hover {text-decoration:underline;}
			#nav ul li ul {background-color:#666666;border:1px solid #333333;display:none;position:absolute;left:5px;top:100%;width:200px;}
			#nav ul li ul li {display:block;width:200px;}
			#nav ul li:hover ul {display:block;}
			#nav ul li ul li a {color:#fff;}

There’s nothing new or magical here. In fact, this isn’t even a very pretty implementation of a flyout menu. The point here, though, is that my CSS has been formatted to mimic the indentation and format of the HTML. Clearly, “li” is a child of “ul” is a child of “#nav” and so on. As your style sheet grows, you’ll be glad you took the extra steps to maintain a mock of your HTML formatting.

Don’t forget – the final step before publishing to production should, at the very least, be minification!

Bonus content: this concept can be rewritten to use Object Oriented CSS (stubbornella@github and object-oriented CSS). Check back later for that post!

Jason vs. jealousy – a quick look at the Responsive Redesign of the Boston Globe

A short while ago, the Boston Globe rolled out a redesigned website. To say that it was just redesigned is an understatement, though – th...… Continue reading