Blog & News
Tips for Organizing CSS Files
*This article is being reproduced from it’s original location on my previous site Casey Reid Design, http://www.caseyreiddesign.com/comments/tips_for_organizing_css_files.
Over the years I’ve tried a number of different approaches to organizing my CSS. I am an organized person by nature so doing it in my CSS kind of goes along with my personality. My methods have evolved over time and each project I work on, it seems I learn a new technique or approach. Here are some tips I use or have tried in the past to help keep my CSS files easier to manage and maintain.
1.) Separate code into sections
Use CSS comments and name the section appropriately. Doing this makes working with code much easier, especially if you need to go back and make some tweaks later on down the road. I usually break my code into these sections.
Link Styles
Common Classes
Layout or Structure Styles
Header
Navigation
Content
Footer
2.) Indent descendants and related rules
#mainContent {
float: left;
padding: 10px;
width: 500px;
}
#mainContent p{
color: #333;
font-size: 90%;
}
#mainContent #news{
color: #FFF;
}
This allows you more easily recognize page structure within your CSS and how elements relate to each other. This method can also be applied for a specific tag such as a heading tag.
h2{
color: #999;
font-size: 90%;
}
#mainContent h2{
color: #000;
}
#footer h2{
background-color: #FF9966;
font-weight: normal;
}
3.) Compress your Code to one line
Instead of having each attribute on its own line, have them all on the same line. This reduces the file size of your CSS file and also makes it easy to scan when trying to find a specific tag.
Instead of this:
p{
color: #999;
font-size: 90%;
margin: 5px;
padding: 10px;
}
Do this:
p{color: #999; font-size: 90%; margin: 5px; padding: 10px;}
4.) Alphabetize attributes
#nav{
background-color: #000;
color: #FFF;
float: left;
font-size: 12px;
margin: 10px;
padding: 5px;
}
This just seems to make my CSS easier to read when I’m scanning it or looking for something.
5.) Use shorthand wherever possible
This makes your CSS easier to read and understand and is much more efficient.
Use:
padding 5px 8px 4px 7px;
Instead of:
padding-top: 5px;
padding-right: 8px;
padding-bottom: 4px;
padding-left: 7px;
You can also apply shorthand for color where applicable. When a color consists of three pairs of hexadecimal digits, you can omit one digit from each pair:
#ffffff becomes #fff, #003366 becomes #036
6.) Reset your CSS
There are a ton of methods for resetting your CSS. I usually do this:
*{
margin: 0;
padding: 0;
}
Then I just apply padding and margins to the elements that need it. This is always a big help with layout issues. A more detailed reset stylesheet along with commentary can be viewed on Eric Meyer’s site. Yahoo also provides a reset stylesheet using their YUI library that you can actually link directly to from your CSS files. More information on Yahoo’s YUI reset CSS is here.
7.) Use separate CSS stylesheets for different elements
Have a main style sheet that you import others into. You could have a stylesheet just for typography, another for layout, and another for colors. By keeping these elements organized within their own style sheets this can make it easier to manage your code.
In your main CSS file import the other stylesheets.
@import url(/css/typography.css);
@import url(/css/colors.css);
@import url(/css/layout.css);
@import url(/css/print.css)
8.) Declare colors used at the top of your CSS files
Within CSS comments at the top of your file code the colors you are using in your file and the color they represent.
/* Color Declarations
#5db352 - light green
#06F - blue
#f03 - red
*/
If you have any tips or tricks for managing your CSS, please do share. I’m always looking for new ways to enhance my methods.
Posted on 03/01/2008 - Comments (0)
