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.


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.


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
  • visibility
  • float
  • clear


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


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


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


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


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


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


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.


  • 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


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


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


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


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.