One Method of Organizing Style Sheets

Posted on

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

  • reset
  • layout
  • typography
  • color
  • classes
  • print

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

  • display
  • visibility
  • float
  • clear

Position

  • position
  • top
  • right
  • bottom
  • left
  • z-index

Borders

  • border-width
  • border-top-width
  • border-right-width
  • border-bottom-width
  • border-left-width

Width/Height

  • width
  • min-width
  • max-width
  • height
  • min-height
  • max-height
  • overflow

Margin

  • margin
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Padding

  • padding
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Typography

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

  • font
  • font-family
  • font-size
  • font-weight
  • text-align
  • text-indent
  • text-transform
  • text-decoration
  • letter-spacing
  • line-height
  • vertical-align
  • white-space
  • word-spacing

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

  • background
  • background-color
  • background-image
  • background-repeat
  • background-position

Border style

  • border-style
  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style

Border color

  • border-color
  • border-top-color
  • border-right-color
  • border-bottom-color
  • border-left-color

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.

  • It takes a little longer to break styles up
  • You can’t use shorthand
  • There is a lot of redundancy

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.