A Cleaner CSS Technique

This may not be new to everyone, but I tried something new in my stylesheet as I designed the Ministry Free Theme. It would not be all that helpful for a static site, but for a cms or blog site, it can really offer some interesting flexibility, and some abbreviation in a stylesheet.

Normally, I will have a series of divs, all named and styled separately, such as a header, then a wrapper, containing sidebars and content, then a footer. For each, I will assign floats, widths, and margins. But with this most recent theme, which is designed on a 960 pixel wide grid, I simply created a few pseudo-classes…

.float-left { float: left; display: inline; overflow: hidden; }
.float-right { float: right; display: inline; overflow: hidden; }
.one-column { width: 300px; margin: 0px 10px; }
.two-column { width: 620px; margin: 0px 10px; }
.three-column { width: 940px; margin: 0px 10px; }

Then, when I was arranging information within the outer wrapper, if I wanted a sidebar or the content area to be a certain width and floated, I would simply insert…

<div id=”sidebar” class=”float-left one-column”></div>

or

<div id=”content” class=”float-right two-column”></div>

This enables me to add styling information for elements such as “sidebar” and “content” but have the ability to easily change widths on different kinds of pages. So when I want to create a forum page that’s full width, I leave out the “sidebar” and just add

<div id=”content” class=”float-left three-column”></div>

instead.

As stated before, this may not be the best technique on all sites, but for a WordPress theme that will contain customized pages or category stylings, it’s quite helpful.