5 Tips for Organizing Your CSS

Working with CSS on my own site’s redesign, freelance work, and my job made me start thinking about the best way to standardize and organize the way I write my CSS. So, I proposed the question to my 9rules friends to collect the best tips from the best designers.

1) This tip is perhaps the most useful because it can apply to both formats of CSS organization that I will describe later. I first saw this on Mike Rundle’s latest redesign of 9rules where he indents descendant and related rules.

For example:



#main_side { width: 392px; padding: 0; float: right; }

#main_side #featured_articles { background: #fff; } #main_side #frontpageads { background: #fff; margin: 8px 0; }

This structure makes it easier to define page areas and how they relate to each other.

Also, the technique can be used when styling specific areas even if the base requires no rules. This can best be seen in the headlines:



h2 { }

#snapshot_box h2 { padding: 0 0 6px 0; font: bold 14px/14px “Verdana”, sans-serif; } #main_side h2 { color: #444; font: bold 14px/14px “Verdana”, sans-serif; } .sidetagselection h2 { color: #fff; font: bold 14px/14px “Verdana”, sans-serif; }

2) The second tip is to use shorthand properties to keep all parts of a style type on a single line.

For example:


margin:5px 0 4px 10px;

Is much more efficient than:


margin-top:5px;
margin-right:0;
margin-bottom:4px;
margin-left:10px;

Combining properties onto a single line using shorthand properties means that your CSS will be easier to understand and edit.


#test {
      margin-top: 2px;
      margin-right: 3px;
      margin-bottom: 5px;
      margin-left: 9px;
      font-weight:bold;
      font-size:12px;
      line-height:14px;
      font-family:Arial, Verdana, sans-serif;
      border-width: 1px;
      border-style: solid;
      border-color: #000000;
      background-color:#fff;
      background-image:url(bg.gif);
      background-repeat:no-repeat;
      background-position:0 15px;
}

That is almost impossible to edit, but using a few shorthand properties, the chunk above can be reduced to a much more manageable four lines.


#test {
      margin: 2px 3px 5px 9px;
      font: bold 12px/14px Arial, Verdana, sans-serif;
      border: 1px solid #000;
      background: #fff url(bg.gif) 0 15px no-repeat;
}

3) The third tip is to clearly divide your stylesheet into specific sections. Also, by using a flag, you can get to the area you are looking for faster. Before you divide up your styles, it is important to define an outline you are comfortable with as will as a separator format you can notice easily.

A sample format I try to stick to is this:

  • Global Styles – (body, paragraphs, lists, etc)
  • Header
  • Page Structure
  • Headings
  • Text Styles
  • Navigation
  • Forms
  • Comments
  • Extras

And a sample separator that is most easily noticeable for me is:


/* -----------------------------------*/
/* ---------->>> GLOBAL <<<-----------*/
/* -----------------------------------*/

4) The fourth tip is difficult to get used to, but can be invaluable once perfected. It is important that you define the basic rules for each area only once so that the same default value is not being rewritten in every rule. If you know that all of the h2’s will not have a margin or padding, define that on the top level and let its effect cascade as it is supposed to. This helps a great deal if the design requires frequent color changes or other non-structural modifications.

5) The fifth tip is more of a comparison between to major options of organizing your CSS, each with it’s own merits and flaws.

On one hand, you can throw your CSS into a compressor to get a very polished and clean view of your entire CSS structure – each rule on a single line. The advantage of this method is that you can get an easy view of your entire stylesheet without much scrolling. The disadvantage is that it is difficult to edit because many rules will require you to scroll horizontally.

Using the more prevalent tabbing method for organization simply reverses the advantages and disadvantages.

The easiest method is to combine all of the tips above to move the base styles for all elements into a separate section of the stylesheet or a separate stylesheet altogether. This leaves less rule-setting for the more specific elements and allows you to have a shorter stylesheet for your main design.


Show Articles By:

You can show articles by time or category.

  • 260.

    The Ethics of Practicing Procedures on the Nearly Dead

    The report from the field was not promising by any stretch, extensive trauma, and perhaps most importantly unknown “downtime” (referencing the period where the patient received no basic care like...

    Read More

  • 260.

    The Ethics of Teaching Hospitals

    I can’t imagine what the patient was thinking. Seeing my trembling hands approaching the lacerations on his face with a sharp needle. I tried to reassure him that I knew what I was doing, but the...

    Read More

  • 260.

    Conscious Conversation: Behavioral Science

    Dr. Eran Zaidel is a professor of Behavioral Neuroscience and faculty member at the Brain Research Institute at UCLA. His work focuses on hemispheric specialization and interhemispheric interaction...

    Read More

  • 260.

    Progress Report

    Two years down, I’m still going. The next two years are my clinical rotations, the actual hands-on training. It’s a scary prospect, responsibilities and such; but it’s equally exciting, after...

    Read More

  • 260.

    Why Medical School Should Be Free

    There’s a lot of really great doctors out there, but unfortunately, there’s also some bad ones. That’s a problem we don’t need to have, and I think it’s caused by some problems with the...

    Read More

  • 260.

    The Cerebellum: a model for learning in the brain

    I know, it’s been a while. Busy is no excuse though, as it is becoming clear that writing for erraticwisdom was an important part of exercising certain parts of my brain that I have neglected...

    Read More

  • 260.

    Conscious Conversation: Philosophy

    Daniel Black, author of Erectlocution, was kind enough to chat with me one day and we had a great discussion – have a listen.

    Read More

  • 260.

    The Stuff in Between

    I’m actually almost normal when not agonizing over robot production details, and quite a bit has happened since I last wrote an update. First, I’ve finally graduated. I had a bit of a...

    Read More