Now Direction

Aaron Mentle presented this point at BarCamp South Dakota last summer. Coincidentally, I was in the shower that very morning thinking the same thing.

There are basically three stylesheets that you end-up with when templating a CMS:

1. The Browser Reset – By now, you should have a comprehensive version set to some hotkeys. Between Meyer’s, YUI, and the several popular CSS scaffolds, I’ve never written one from scratch.
2. The Surround – This is the big one, where half of your CSS work is done to create a functional page layout that matches the design. This can include, but is not limited to a header, breadcrumbs, navigation, sidebar(s), tertiary navigation and a footer.
3. The Content Area – This is the other half where your users can enter content in their admin editor area. This can be straight text, a WYSIWYG editor, or even sorted views of content straight out of the CMS. Just when you think you’re done, there’s forms that have to live in the Content Area, too!

The browser has to load all of these so your h1 tag gets assigned about four times! Once from the internal browser styles, then it’s reset, then it’s spec’d for the design, then it’s declared yet again when it cascades into the content area. Graciously, modern browsers are wickedly efficient when doing this.

Which begs the question: could your site be more efficient? What if you just set the values from the start? Sorry to disappoint, but it’s basically negligible. However, there are a few things that you can do to optimize your CSS for browser DOM crawling. This is more of a philosophy about organizing your stylesheets, too.

1. Use IDs – There should only be one ID per document, so once a browser finds it, it can disregard the rest of the DOM.
2. Namespace any HTML tags with ids – #Header h1 Instead of searching the entire document for every h1 tag, the browser can focus on the #Header div to look for h1s exclusively.
3. Use only one class in a selector – Because every DOM element has the potential to have many classes, you need to limit their use to one or two specific ones.

Happy styles!