Taking Your CSS Skills to the Next Level

Filed under

So you know how great cascading style sheets are. You've sworn off the use of font tags, you're creating hover link effects with CSS instead of rollover images, and you're using floating divs instead of tables to layout pages. It's a beautiful thing but you're wondering what's next?

I've been writing CSS for seven years and I'm still learning new things. I've read dozens of CSS how-to articles but very few of these discuss an effective CSS development process. So I decided to write an article to share my process.

Well-Laid Plans

It's really easy to get caught up in the use of a new tool, but I urge you to set that CSS hammer down and draw up a plan before starting to build. Sketch your design on a cocktail napkin, fire up Photoshop, use a stick in the sand, it doesn't matter, just draw it up first. Use your sketch to define relationships, flow, and the hierarchy of elements in your pages. Now you can begin to code with vision and purpose, so pick that hammer back up.

Build on a Solid Foundation

Now it's time to lay your site's foundation, one made of well-structured, semantically correct HTML. Employ headings, tables, and lists as they were intended to be used. Minimize or avoid use of presentational elements, including br tags, hr tags, and non-breaking spaces. Nest tags properly, slap a DOCTYPE on your files, and validate them to make sure that your foundation's solid.

Building the Style Sheet

Now that you have a plan and foundation you're ready to crank out the styles.

Define Page Containers

Begin styling your pages by creating IDs to mark the HTML layout containers you defined during the planning process. Use div tags to surround and contain your banners, menus, content areas, and footer, then apply the appropriate IDs to these containers. Beware of that common condition found in web designers known as divitis, the tendency to use too many div tags. Remember that IDs are only used once per page to avoid validation errors and problems with JavaScript's ability to interact with the DOM.

Type Selectors are Elemental

Use type selectors to style the body, heading, paragraph, link, list, table, and form elements on your pages. These styles create the base appearance for your pages without the need to edit a line of HTML. Take advantage of the CSS rules of inheritance and the cascade to keep your style sheet lean.

The Mighty Descendant Selector

I believe the most useful CSS selector available is the descendent selector. Pair up your container ids with HTML tags to style elements within your banner, menus, content areas, and footer. Descendent selectors make it easy to give links in your menu a distinct look without affecting link styles elsewhere. It's surprising how much style can be applied to pages without the use of classes.

Time to Add Some Class

Inevitably you'll reach the point where exceptions must be made–it's time to break out the classes. When naming your class and ids, use simple, semantically-meaningful names. This means that you should avoid names that solely describe color, alignment, or page position (i.e. top, left, right). Why you ask? Consider for a moment that your left-side menu class name becomes meaningless when, at some later point, the menu is moved to the right side of the page. Perhaps a more meaningful name, like site or section menu makes more sense in the long run.

Hack Management

As you dream of a future without browser hacks, begin to prepare for that day. Try to avoid browser specific CSS and hacks. Many of us are just now learning that those handy box model hacks we found and used to fix problem with Internet Explorer are breaking our pages in IE7.

If you need to employ hacks for IE, keep them in separate style sheet and use conditional comments to link to them. If you think you need a hack for Firefox, Opera, Safari, or IE 7, think again, there's probably a standard compliant method you haven't tried yet.

<!--[if IE 6]>
  <link rel="stylesheet" type="text/css" href="https://www.2tbsp.com/styles/ie6.css"></link>
< ![endif]-->

Time to Tidy Up

It doesn't take long to create a monster. I've built style sheets under deadlines, full of hacks, with code thrown in to just get it done. These sheets grew to become nightmares to maintain. I've recently begun to adopt refactor methods to trim the fat and better organize my CSS. The goal of a refactor is to remove redundant, overlapping, and unnecessary declarations. Look for opportunities to group related font declarations. Convert long format declarations to their short form equivalents. Individually, these edits may not seem much, but they add up quickly in large style sheets. I've been able to reduce large CSS files as much as 1/3 of their original size.


ul { font-size:12px; font-family:Arial; } ol { font-size:12px; font-family:Arial; }


Try the following instead.


ul, ol { font:12px Arial }


Group declarations with similar properties and use the short form font property, a comma makes all the difference.

border-top: 1px solid #ccccc; 
border-right: 1px solid #66666; 
border-bottom: 1px solid #66666; 
border-left: 1px solid #cccccc; 
border: 1px solid #ccc; 
border-right: 1px solid #666; 
border-bottom: 1px solid #666;

Set the border property then change one or two sides instead of declaring all four.

padding-top: 2px; 
padding-right: 4px; 
padding-bottom: 2px; 
padding-left: 4px;

Use short form declarations for margin and padding–remember top, right, bottom, left, or TRBL to order values.

padding: 2px 4px 2px 4px;

Or better yet, group top and bottom, left and right when they match.

padding: 2px 4px;

There are several web services available to help you optimize your CSS. David at Blogging Pro wrote about how these sites work, tested the services with style sheets from popular sites, and shows detailed file size saving comparisons. I'm partial to CSS Tidy and CleanCSS (links under Further Reading).

Test Early, Test Often, and Seek Validation

Finally, before launch, validate your pages. Actually, it's a good idea to validate your CSS throughout the development and refactor processes so that any problems can be dealt with immediately. Check your server logs to see which browsers you need to consider the most, test your pages in those browsers, and make every attempt to fix problems without resorting to hacks.

Further reading

I hope this advice improves your productivity and helps to maintain your sanity in that next big project. What's your CSS development process?