Do you attach multiple style sheets to a web site or have one long one for the whole site?
At the moment, possibly because I am relatively new to CSS and have trouble sorting through a lot of code to find the part I want, I tend to write short bits of CSS that refer to parts or pages of the site and then link them in. ie one style sheet for the header, another for the navigation bar etc.
Is this the correct approach?
I tend to use multiple CSS files, but not for the same purpose that you do. I have one CSS file that controls the site wide styles, such as basic header and paragraph styles as well as page backgrounds, and outer containers. Then I have another CSS file that is for content and is for the most part specific to individual pages or templates. In addition to those two, I have two more CSS files that specifically target IE6 and IE7.
One recommendation i can give you is to use ‘flags’ as recommended by Doug Bowman http://stopdesign.com/log/2005/05/03/css-tip-flags.html. The basic idea is to use comments that have a character that won’t be used anywhere else in the CSS and he uses the =. Here’s an example:
So when you search for =header it will take you right there.
Another option — and one that I use — is CSSEdit’s groups. It adds some semantic comments to your CSS that allow CSSEdit to group all of your styles neatly in its sidebar.
Like I said in the thread that Chris is linking, the only issue with large css files is speed. It all depends on who your target audience is. If they’re running broadband, you could have 100 css files and it probably wouldn’t matter. HTTP requests on a fast connection won’t bog you down too much. If half of your audience runs on 56k, well even css files that are 8kb in size are said to be too large…so the less HTTP requests, the better.
One thing I always do is separate my css by Defaults, Classes, and IDs. I then arrange everything alphabetically in their corresponding sections.
Then I use a hierarchy system like so:
I use huge fat comments above the sections of Classes and IDs like, /********************* CLASS *************************/
This makes things pretty easy to find for me.
You must be logged in to reply to this topic.