Use the links below to share Beautiful CSS: Organizing Your Stylesheets on your favorite social networks.
Back to the Article >>
Beautiful CSS: Organizing Your Stylesheets
January 7th, 2009 in Design Tips & Tutorials
by: Matthew Griffin
When I first took the plunge into CSS several years ago, one of my biggest frustrations was stylesheet organization. I scoured source code from popular sites trying to figure how they accomplished various layout effects. But tracking back and forth from stylesheets to HTML proved to be a difficult task. Unfortunately , that separation of style and content that makes CSS so awesome can also make it difficult to understand. Adding to that difficulty is the fact that each designer may have a different way of organizing stylesheets. If you inherit someone else's site, this can cause some problems. In a perfect world everyone's CSS would be well-organized, easy to scale, and easy to understand. We may not be able to attain such CSS Nirvana but we can at least make it easier on ourselves and those we work with by following this set of guidelines.
Basic Organization
A stylesheet should be separated into four main sections: (1) Universal Styles (body, p, a, etc.), (2) library styles, (3) template layout styles, and (4) individual page styles. In order to make it easier to locate the four sections discussed here make sure that you put a descriptive comment above each one along plenty of space above and below. Even with well organized CSS, it can be easy to get lost. The bulk of your CSS should go in the template layout section and should be formatted to match the hierarchy and indentation of the corresponding HTML markup. We'll get to that in a moment, but for now let's start with universal styles.
Universal Styles
Starting with universal styles is pretty typical. You want to set the stage by specifying the background, font size, link color, etc. for the website. The universal style section usually only takes up a small portion of the overall CSS code. You should only include HTML tag selectors in this section of your CSS file. This part of the stylesheet is meant to describe what the norm will be for commonly used HTML tags. Body, a, p, and blockquote are examples of the selectors that should be cited here.
Library Styles
The next section in your stylesheet should be library styles. Library styles use classes to style elements that are used over and over again in your website. For example, I usually have a library style called .photo_right. I use this library selector to float images to the right in my website. Here's what it looks like:
<img src="myimage.jpg" class="photo_right" />
/*CSS*/
.photo_right{ float: right; margin-left: 10px; }
You should only use library selectors on element that appear in various places on the site but need a consistent look regardless of their location. You wouldn't use a library selector, for example, on your main navigation bar.
Template Layouts
As I mentioned above, the template layout section is where the bulk of your CSS will go. I find it easiest to format and space this section of my CSS to match the order and indentation of my HTML. For example, if you have a page with HTML that looks like this:
<div id="header">
<div id="navigation"></div>
</div>
</div>
Then your CSS in the template layout section of your stylesheet should look like this:
#container { }
#container #header { }
#container #header #navigation { }
Formatting CSS in this way makes it easy to find which selector goes with which HTML tag.
It's important to distinguish in your HTML between unique template elements and other elements that change from page to page. Template elements are tags that wrap the content of the site and appear on every page (with few exception). For these template elements, it's best to use unique IDs for styling rather than classes. For example, if I have a two column page layout with a header on top, my HTML and CSS would look something like this:
<div id="container">
<h1 id="header">Here Is My Header</h1>
<div id="column_one">Here is column one.</div>
<div id="column_two">Here is column two.</div>
</div>
/*CSS*/
#container {
width: 780px;
}
#header{
width: 100%;
}
#column_one{
width: 600px;
float: left;
}
#column_two{
width: 180px;
float: right;
}
Using IDs for template elements makes it easy to identify the important selectors in your CSS and HTML. Major layout changes become easier because you know exactly what to look for.
Classes should be used for elements that aren't unique. For example, if you have an unordered list (<ul>) element that is a list of links, you would put that into a class. Unless the list of links is your main unique navigation bar, chances are you will have lists of links all over your site on various pages and in various sections of the layout. Let's look at an example of one such link list wrapped in a template layout column.
<div id="column_one">
<p>This is the first column</p>
<ul class="link_list">
<li>link one</li>
<li>link two</li>
</ul>
</div>
/*CSS*/
#column_one{
width: 180px;
}
#column_one ul.link_list li { background-color: #ccc; }
In this example, only link_lists within the #column_one <div> will have the background color #ccc. These types of classes should appear in the main layout section of your stylesheet. Any class that is dependent on certain ID selector should be grouped below that ID selector and indented exactly the way your HTML is indented.
Individual Page Styles
The last section in your stylesheet should be a section for classes that only pertain to certain pages or certain types of pages. Grouping these selectors together will make it easy to navigate the quirks of the individual pages on your site. Many times you will run into situations where there is a particular style you need to use on a particular page but the style has no relevance to the rest of the pages on the site. That's when you move the selector into the individual page section of your stylesheet.
For a complete example with all the sections described above you can take a look at this site I recently did a CSS overhaul for. No, I didn't design the graphics so don't give me a hard time about that. The HTML and CSS are what you should look at.
- 66 Comments
- 49461 Views