Style Sheet Organization
For anyone just in the learning process of developing web sites with CSS, it’s easy to create a style sheet that gets quite unweildy. I’ve observed several different preferences and methods and have adapted my own style.
The main goal is to be able to find the styles that govern different aspects of my layout easily. In the beginning I recall overwriting styles, simply because I couldn’t find and didn’t remember that I had already styled elements a certain way.
My basic style sheet orgainzation
I prefer the C programming language comment tags in my style sheet. They look like this:
/* Put my comments here */
/* Comments can span
several lines before you
close them */
I like to use comment tags to define the different sections of my style sheet. I don’t always follow the same order, but I do try to keep like things together.
- I usually begin my style sheet with a date, my url and the hex-code for the main colors that I am using.
- Next is the structural blocks (ie. #wrapper, #header, #sidebar, etc.)
- Main Navigation
- Typography for headers and paragraphs
- Special classes
- Lists
- Links
- Images
- Tables
- Miscellaneous styles that don’t fit with other categories
I’ll use the comment tags as headers for each section:
/* MAIN LAYOUT */
#wrapper {….
/* MAIN NAVIGATION */
#navcontainer {…
/* TYPOGRAPHY */
h1 {…
This method helps me find, organize and maintain the size of my style sheet.