some css

There comes a time, unfortunately, when the web site is built. It has been completed and the client/manager/boss has signed off on it. This feels like the end of a long arduous journey that has lead through the depths of your soul as a developer. It’s done. Completed. Finished. Right? Not so fast! The journey is not nearly complete, it is so very, very, VERY far from over. Now comes the maintenance, upkeep, management of the site. How can we make this part of the life cycle less painful? Proper prior preparation prevents poor performance.

One area that can cause plenty of angst is the site’s style sheet(s). Riddled throughout the site’s code are all these tags for class=”" and id=”". What can we do to make these more manageable? How do I find what I’m looking for once I open that .css file, scroll to the bottom and learn that it is 400+ lines of code? This article addresses some ideas for organizing CSS files.

  1. Use Relevant classes & ID’s

    Relevant to who? You, the code writer? Yes. “Well that’s easy,” you say. Yes, right now it is, but what about in 6 months? In a year? In 3 years? I’m pretty sure you will at some point forget what the class “blue1″ meant. Are there more blues? How many more? What if the client decides they like red better? Instead of “blue1″ for all of the links in the left hand nav that should have color:#339; how about using a class like “leftNavLink” so you know exactly what the class is modifying?

    Don’t forget, some poor sap is going to come along and have to see your code (this poor guy/gal might even be you), so try to make it easy for them to understand, too. I try to ask myself, “Will some random donkey know what this means?” If I can answer yes, I feel like I’ll know what I’m doing next time I see the class, even if it’s just a quick “view source”.

  2. Organize your .css file(s)

    I shiver when I open an old .css file and see something like this:
    body{background: #ffffff;}
    #content{color: #000066;}
    .nav{background: #000000;}
    a{text-decoration: none;}    Egads, man! My life has been made so much easier since I started grouping things in my .css files. I put all my elements together (under /*elements*/), all my id’s together (under /*id’s*/), and all my classes together (yes, under /*classes*/). This can be taken a step further by grouping all of your navigation together, your footer, your header, etc. And let’s not forget, the next coder to see it is going to breathe a sigh of relief when they see some organization to the file.

    Another trick I’ve developed is to put things where they fall on the page. For example, I tend to work my way down the page in my css file – meaning my header stuff is at the top, then my left side stuff, then my “main content” stuff, then my right side stuff, then the footer. This helps me find declarations faster just by skimming the file.

  3. Feel free to use more than one CSS file, just don’t get carried away

    Lots of times sites have one (or several) pages that don’t fit the layout scheme of the rest of the site. I’ve found it helpful to use a different style sheet for those pages. Generally I’ll still link to the main/base style sheet(s), but then below that in my header, I like to the specialized one. This way my “different” page still inherits all of the necessary styles, but these can be overwritten or added upon in the specialized page.

    So should you have 14 style sheets if your site is 14 pages? Absolutely not. It only makes sense to incorporate a different style sheet when the pages are vastly different. I’ve found myself making a few unique style sheets only to discover I was repeating myself, so I combined the repeats into the main style sheet and gave the elements a specific class name so I was reaching all of them from one place. The main idea here is the DRY (don’t repeat yourself) principle.

  4. Alphabetize

    Why? I’m not totally sure. When I heard the suggestion I thought it was ridiculous, but I made myself try it. Ever since then, I’ve done it every time. For whatever reason
    div#container{
    background: #f0f0f0;
    color: #006;
    font-size: 14px;
    margin: 1em auto;
    width: 960px;
    }    just flows better for me than
    div#container{
    width: 960px;
    font-size: 14px;
    margin: 1em auto;
    color: #006;
    background: #f0f0f0;
    }

  5. Other things to consider

    It’s a great idea to make sure you follow clean coding standards here as well. Use indention that makes sense. Be consistent with those indentions, your naming conventions, and your spacing (color:#000; vs. color: #000;).

    USE COMMENTS! As that file grows, it’s going to get harder and harder to find stuff quickly (I know “ctrl+f” helps). Any decent code editor will usually color treat your comments so they stand out, and your eye will catch this easily as you scroll through your files.

These are just my ideas, some things I keep in mind so that maintaining a complicated site is less of a nightmare. I’d love to hear from you in the comments about some of your favorite techniques – do share!

similar stuff: