5 TIPS FOR ORGANIZING YOUR CSS

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:

<br /><br /><code><br /><br />#main_side {<br />    width: 392px;<br />    padding: 0;<br />    float: right; }<br /><br />    #main_side #featured_articles {<br />        background: #fff; }<br /><br />    #main_side #frontpageads {<br />        background: #fff;<br />        margin: 8px 0; }<br /></code><br /></pre>  	<p>This structure makes it easier to define page areas and how they relate to each other.</p>  	<p>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:</p>  	<pre><br /><br /><code><br /><br />h2 { }<br /><br />    #snapshot_box h2 { <br />        padding: 0 0 6px 0;<br />        font: bold 14px/14px “Verdana”, sans-serif; }<br /><br />    #main_side h2 { <br />        color: #444;<br />        font: bold 14px/14px “Verdana”, sans-serif; }<br /><br />    .sidetagselection h2 {<br />        color: #fff;<br />        font: bold 14px/14px “Verdana”, sans-serif; }<br /></code><br /></pre>  	<p><strong>2)</strong> The second tip is to use shorthand properties to keep all parts of a style type on a single line.</p>  	<p>For example: </p>  <pre><code><br />margin:5px 0 4px 10px;<br /></code><br /></pre>  	<p>Is much more efficient than:</p>  <pre><code><br />margin-top:5px;<br />margin-right:0;<br />margin-bottom:4px;<br />margin-left:10px;<br /></code><br /></pre>  	<p>Combining properties onto a single line using shorthand properties means that your <span class="caps">CSS</span> will be easier to understand and edit.</p>  <pre><code><br />#test {<br />      margin-top: 2px;<br />      margin-right: 3px;<br />      margin-bottom: 5px;<br />      margin-left: 9px;<br />      font-weight:bold;<br />      font-size:12px;<br />      line-height:14px;<br />      font-family:Arial, Verdana, sans-serif;<br />      border-width: 1px;<br />      border-style: solid;<br />      border-color: #000000;<br />      background-color:#fff;<br />      background-image:url(bg.gif);<br />      background-repeat:no-repeat;<br />      background-position:0 15px;<br />}<br /></code><br /></pre>  	<p>That is almost impossible to edit, but using a few shorthand properties, the chunk above can be reduced to a much more manageable <em>four</em> lines.</p>  <pre><code><br />#test {<br />      margin: 2px 3px 5px 9px;<br />      font: bold 12px/14px Arial, Verdana, sans-serif;<br />      border: 1px solid #000;<br />      background: #fff url(bg.gif) 0 15px no-repeat;<br />}<br /></code><br /></pre>  	<p><strong>3)</strong> The third tip is to clearly divide your stylesheet into specific sections. Also, by using a <a href="http://www.stopdesign.com/log/2005/05/03/css-tip-flags.html">flag</a>, you can <em>get</em> 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.</p>  	<p>A sample format I try to stick to is this:</p>  	<ul><li><div class="color_wrap">Global Styles – (body, paragraphs, lists, etc)</div></li><li><div class="color_wrap">Header</div></li><li><div class="color_wrap">Page Structure</div></li><li><div class="color_wrap">Headings</div></li><li><div class="color_wrap">Text Styles</div></li><li><div class="color_wrap">Navigation</div></li><li><div class="color_wrap">Forms</div></li><li><div class="color_wrap">Comments </div></li><li><div class="color_wrap">Extras</div></li></ul>  	<p>And a sample separator that is most easily noticeable for me is:</p>  <pre><code><br />/* -----------------------------------*/<br />/* ---------->>> GLOBAL <<<-----------*/<br />/* -----------------------------------*/<br /></code><br />

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.

Technorati Tags: