Grow your CSS skills. Land your dream job.

Do you? Should I?

  • # October 15, 2008 at 9:29 am

    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?

    # October 15, 2008 at 9:39 am

    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:

    Code:
    /* =HEADER
    ———————————————– */

    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.

    # October 15, 2008 at 2:29 pm

    I use two stylesheets: a reset.css that stays the same for all sites and a stylesheet.css that is specific to each site. Keep in mind that every stylesheet that you use beyond the first is an unneccessary http request which slows down page loading.

    # October 15, 2008 at 5:38 pm

    I agree with Mikes, the server hits really do add up. If sprite-ing images helps, which it does, keeping your number of stylesheets down will also help. I use 2 stylesheets. 1 for everything, 1 for IE6.

    # October 15, 2008 at 5:53 pm

    This thread my be of interest as well.

    # October 16, 2008 at 4:01 am

    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.

    # October 16, 2008 at 2:20 pm

    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:

    Code:
    .item {
    style:whatever;
    }
    .item ul {
    style:whatever;
    }
    .item ul a {
    style:whatever;
    }

    I use huge fat comments above the sections of Classes and IDs like, /********************* CLASS *************************/

    This makes things pretty easy to find for me.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".