5 Tips for Organizing Your CSS
Working with CSS on 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.
Source: erraticwisdom.com
Tags: CSS, define, organization, properties, rules, stylesheet, tips
Related:
Posted in CSS. 277 views
Responses are currently closed, but you can trackback from your own site.
