Tunnel 7 | Blog | Keeping Your CSS Organized

Blog

Keeping Your CSS Organized

Published on May 19, 2009

Cascading style sheets (CSS) define the design of your website (what it looks like). Font choices, font sizes, background colors, page layouts ... all are controlled by CSS files. Every now and then I open up a CSS file that I wrote several years ago and ask myself, “What was I thinking?” If you’re like me how you organize your CSS files has evolved over time. Here is my best advice to keeping your CSS files organized.

Keep all CSS in external files

First and foremost, keep all your CSS code in external files. Your individual HTML pages should have no CSS code in them other than the call to the stylesheet in the <head> portion of each page. This ensures a clean separation of design (CSS) and content (HTML) and makes website maintenance exponentially easier. Here is an example showing how to add a stylesheet to an HTML page:

Keep your CSS files in one directory

I keep all my CSS files in a separate includes directory for good organization as well (typically a directory named “includes” or “inc”). By keeping all your CSS code together in one location you have a central directory for all CSS code, which will also help with website maintenance in the future.

Never use inline styles

Inline styles are really no better than the old <font> tags. I can tell you there is nothing more frustrating than making a global change to your main stylesheet only to find that the change is being overwritten by inline styles on certain pages. (Inline styles overwrite global styles.) Save yourself the headaches of going through individual pages to clean up inline styles. Don’t use them.

Use a CSS reset

Browsers have a tendency to interpret default values differently for any given element, which can cause you cross-browser compatibility headaches. A CSS reset file levels the playing field across all browsers by setting all default values to the same value. Eric Meyer’s CSS reset file is an excellent example of a reset file.

Use Comments in your CSS files

Just as you can have comments in your HTML files, so to can you in your CSS files. Comments are also great for delineating sections of your CSS file and for explaining (to future you or someone else working with your code) what a particular block of code does. Comments in CSS files are defined by this syntax:

/* css comments here */

Organize your CSS logically

Within the CSS file itself it is best to have an organized structure. For me I organize by the following order: global elements, sections (header, body, footer), forms, tables. Keep in mind that CSS files inherit so defining global elements first makes sense and getting more specific as you move down can override global elements where needed.

Use IE conditionals

Inevitably you will come across CSS bugs, particularly in older browsers (yes, I’m looking at you IE6!). Rather than include the fixes for these bugs within you main stylesheet, create a separate stylsheet for the particular version of Internet Explorer causing you the problem. This ensures that your fix doesn’t cause issues in other browsers.

Be open to change

I can tell you that with experience you will find better ways to write and organize your CSS files. Like I mentioned in the opening I’m constantly refining and improving my CSS files and you should be open to such changes. The internet is constantly changing and staying on top of these changes by adapting your work methods will help keep you ahead of the curve.