I’ve been designing a new CSS framework the last few months and thought I’d share my thoughts on how I set it up to be both useful and flexible. I’ve tried to take best practices from some of the

reset.css

This negates most of the CSS rules written by the default.css built into the browsers. Gets everything back to a level playing field so your new rules are more predictable.

layout.css

All the containers, columns, navigation etc. This is the largest sheet and contains everything that doesn’t fit in any of the other sheets.

colors.css

This is where all your colors live. It helps with consistent usage. If you are responsible for maintaining brand this is the best place to control that effort. You can also use this sheet to define a high contrast style as well. Just add another sheet and conditionally point to it in this one’s place.

forms.css

Forms are always a bear to design. This is where I keep all the form elements and different form layouts.

type.css

All typography is in this one. H1, H2, H3 etc. are defined here. Font-family.

iehacks.css

Where I make IE act like a modern browser.

debug.css

During development I like to tun on certain styles to help me. (ex. div {background-color: pink;}
) This helps me see all the divs on a page so I can work on floats etc. I use a JavaScript to toggle this sheet on and off.