A Different Approach to Writing CSS 2008 May 3

How do you write your HTML/CSS? Do you use unordered lists for links? Lots of whitespace in your CSS file? Don't know when to use an id selector or a class selector? Learn how and why to change your coding style.

First, let's take a look at a design element that every website has: the navigation menu.

<ul class="navMain">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

And the ugly CSS:

ul.navMain {
    list-style: none;
    margin: 0;
    padding: 10px 5px;
    padding-top:5px;
    font-weight: bold;
    }

ul.navMain li {
    display: inline;
    padding: 0 8px
    }

ul.navMain a {
    text-decoration: none;
    padding: 0 0 3px;
    border-bottom: 4px solid #ffffff;
    color: #999999;
    }

ul.navMain a.active {
    border-color: #F60;
    color:#06F
    }

ul.navMain a:hover {
    border-color: #F60;
    color: #666666;
    }

There are several things that bug me about the above code:

1. Overuse of HTML tags (<ul><li>)
   The point of CSS is to use less HTML tags, not more. Why use unordered lists and then completely change the functionality of how they display when we can do without them? And what happens when we need to override how the core <ul> and <li> elements display (e.g.: How to Style Perfect HTML Lists) but didn't "reset" the list in our CSS? (Did you catch how ul.navMain li { ... } is missing margin: 0?) Less code is always better!
2. id selector vs class selector
   The id selector (id="idName") and class selector (class="className") have almost the exact same functionality. The general rule of thumb is that if your element/style only appears once on your page, use an id selector. Otherwise, use a class. Multiple classes may also be used within a single element (class="className1 className2 className3"), while id selectors cannot because they're designed to only be used once as a way to identify an unique element.
3. Ugly Formatting
   Welcome to the great debate of single-line vs multi-line! My god, look at all that hideous whitespace! Now, whitespace is great for learning, but we're not newbies anymore, right? If you don't understand the CSS you're writing (or copy-pasting) or it's rather convoluted, then I don't blame you for wanting to see every little property on the screen. But otherwise, single-line is great if you want to hack out CSS quickly.

   The advantage is that a shorter document is created: less scrolling is involved making it much easier to pick out elements. Quicker changes = more efficiency = time saved. And it's not like single-line CSS looks horribly messy--it's incredibly easy to know what's going on with a single glance. We can look at any random line in a CSS file and know exactly where we are within the document, and that's beauty.

   Does less vertical scrolling equal more horizontal scrolling? Not necessarily. When making updates, there are certain properties we're just not going to change, like display or float or even width. We put these at the very end of the line. color and font properties are nice to have up front (as clients love to play with these). We can also group similar attributes together, which we should be doing anyway, or use shorthand CSS (e.g., background:#000 url(../img/scan_lines.gif) repeat-y; margin:10px 20px; etc.). And with widescreen monitors becoming more prevalent, this leaves developers with more horizontal real estate that should be put to use.

   Now there are several arguments against that I can understand: you use/need a special third-party tool to help you write CSS; you have word-wrapped turned on; you like to validate your CSS and want an exact line; or you are working with single-line haters. Otherwise, it's not "personal preference" when there is an obvious benefit to writing CSS using single lines. It took me a couple years before I switched over, but once I did I've never looked back.

The above CSS, rewritten:

<div id="navMain">
    <a href="#" class="active">Home</a>
    <a href="#">Products</a>
    <a href="#">FAQ</a>
    <a href="#">About Us</a>
    <a href="#">Contact Us</a>
</div>

#navMain { font-weight:bold; padding:10px 5px; }
#navMain a { color:#999; padding-bottom:3px; margin-right:1em; border-bottom:4px solid #fff; text-decoration:none; float:left; display:block; }
#navMain a.active { border-color:#f60; color:#06f }
#navMain a:hover { color:#666; border-color:#f60;}

I'd rather look at 4 lines of CSS than 29 lines any day of the week.