One Method of Organizing Style Sheets

By on

I have been working with a new method for organizing my stylesheets lately. I have 6 main stylesheets:

At the top of each document I specify exactly what is allowed. Here are the parameters I created for myself in an attempt to define hard edges to my coding.

Reset

Anything goes here. It’s a reset and I don’t expect to touch it often. I do not merge typography styles here. The only exception is the font-size. I set that to 100% or 85%, whatever the project calls for.

Layout

This stylesheet may only contain the properties that effect the box. You will notice that border width is present. That is because a border has an effect on the overall dimensions of an element.

Display

Position

Borders

Width/Height

Margin

Padding

Typography

This file only contains properties that affect the typography. No colors here.

Color

As well as background and foreground colors, a background image and its positioning can be styled in the stylesheet. Additionally the border style (not width) and color can be set.

Backgrounds

Border style

Border color

Color

Classes

Anything goes. I limit this to ONLY reusable classes that are as generic as possible.

Print

Again anything goes. This stylesheet is usually pretty small, but very important.

Caveats

There are certainly problems with this system.

Upsides

On the other hand, I do a lot of messing with the layout. This has been invaluable. I can mess with it without worrying that I am going to jack up the typography or colors. It’s very clean.