Andy Vaughn

When writing CSS, it’s very important to pay attention to the “cascading” factor in your stylesheets, as opposed to simply adding style on top of style. When writing CSS for a content management system, it is vital to harness the strength of the cascade, and not repeat yourself.

I’m going to show you how I write stylesheets for content management systems, and minimize extraneous code, whilst keeping the design lean and purposeful.

Stylesheet Reset

First, I start with a clean stylesheet and link to a resetter. This makes sure that you start with a clean foundation, and remove all inherited styles from your browser, whether using IE, Firefox, Safari, Opera, Chrome, or otherwise. Here’s the one I use by Eric Meyer: base reset.

I link to it inside my style.css with the @import declaration, to package it with the media-dependent style.css that I’ve created.

@import url('reset.css');

Ems and relative sizing

Next, I’ll define the body style and a few generals for typography:

body {font-size: 62.5%; font-family: Georgia, Baskerville, serif; background: #FFF; color: #000;}

By setting the font-size to 62.5%, I am doing a baseline font reset to approximately 10 pixels. This allows me to size everything in my layout, line-height, margins, padding, and rest of the structure in “ems” which is the pixel-height of the capital letter em (10 pixels). So, for example, if I’d like to size my container to 960 pixels, I size it to 96ems.

#container {width: 96em; margin: 0 auto; text-align: left;}

This also is convenient for text-resizing in browsers. It allows for the layout to grow with the text.

Defining content

It’s important to clearly define content sections from layout, actionable, header, or navigation sections. Content sections are the editable regions where your client or you will be adding content with a rich-text editor through the administrative panel. For Wordpress, the default is #content.

Once you have defined the content section, it is important to define how general tags will be styled. For example, you need to account for how paragraphs, lists, headers, images, links, and blockquotes will look, because you don’t know what will be added in the future to these sections.

However, instead of simply styling the tags alone, you will want to style these as children of the section #content. The reason for this, is because if you define all paragraphs to have a margin of 20 pixels, then any paragraph tags in the header, sidebar, footer, or other non-content sections will also have this margin, whether you want it to or not.

Good:

#content p {font-size: 1.8em; line-height: 1.5; margin: 0 0 1.5em;}

Bad:

p {font-size: 1.8em; line-height: 1.5; margin: 0 0 1.5em;}

Next, you add style to all of the tags that need to be normally accounted for in a content section. I include a list of commonly added HTML tags on my setter stylesheet post. Now remember, you need to add #content before all of those tags, if you’re styling for a content management system.

Layout, navigation, etc.

You would then want to add style to the layout, navigation, header, and other sections of your site that are not directly editable. This will be much easier now that you defined all your tags specific to the content section. You won’t have to have many declarations like this:

#header p {margin: 0; padding: 0; background: transparent;}

These types of declarations run rampant in CMS stylesheets, simply used to override over-zealous style declarations from earlier stylesheets or from further up the page.

* Important: It is important to note that often users will nest ordered lists inside of unordered lists, images inside of blockquotes, and paragraphs inside of li’s. These need to be accounted for in the cascade. And, thinking ahead will prevent grossly over-sized text, whilst maintaining well-needed contrast.

Any tips I’m forgetting that you like to use?