There are many ways of organizing CSS code but the following are bestway to manage your css document.

1.Comment your stylesheet

Commenting your stylesheet makes it much easier to find the information or the commands you’re looking for.

Meaningful comments include:

  • Last updated – This information can quickly let developers know about recent changes made to the file:/* WEBCREDIBLE
    Updated: Thu 7 April 2008
    Author: Razer Maharjan
    Updates: Add new section 'Forum'
    ––––––––––––––––––––––––––––––––––––––––––––––––*/
  • References – Comments can also be used as a quick reference for the main style guides applied throughout the site:/* COLORS
    Body Background: #ffffff
    Main Text: #000000
    Link: #F0F0F0
    etc ...
    */
  • Organisation – Use comments to identify the different sections of the stylesheet:/* =HEADER
    ––––––––––––––––––––––––––––––––––––––––––––––––*/

    /* =FOOTER
    ––––––––––––––––––––––––––––––––––––––––––––––––*/

  • Reminders and notes – Leaving reminders and notes for yourself and other developers can help avoid confusion later:/* The width is overwritten for IE 6 in: cssIE.css */
    div {width: 150px;}

Define general rules and main classes at the top of the stylesheet

Set the styles of generic HTML elements, for example:
body
{
background: #fff;
font: arial, sans-serif 75%;
}
h1 {
font-size: 1.2em;
color: #000;
}
h2 {
font-size: 1em;
color: #f0f0f0;
}
img {border: 0;
}

Then, list the classes that will be most commonly used across the site, for example:

.hide
{
position: absolute;
left: -9000px;
}
.required {
background: url(#) no-repeat 100% 0;
}
.fl
{
float: left;
}
.fr
{
float: right;
}

Order the CSS in the same order as the HTML

The order of the HTML should be used to determine the order of the CSS sections. CSS files can sometimes be large and commands difficult to find. Having some correlation between the HTML and CSS file makes it easier to locate how an element is being styled.

Know when to use elements, ids and classes

Using the correct selector type means your CSS file can be significantly reduced in size:

  1. Elements – Elements such as body, (<body>), paragraphs, (<p>) and headings, (<h1>,<h2> etc.) should be used to define general rules
  2. Ids – These are unique identifiers and should only be used once within a document. Ids should be used to style major structural sections of a web page such as the header or the footer.
  3. Classes – These can be used on any type of HTML element.

Too many ids or classes can overload the HTML and the CSS files unnecessarily. Try and define as many rules as possible by referencing elements and/or ids by nesting the selectors.

Imagine the following HTML code:

<ul id="nav">
<li><a href="#">Item 1</a></li>
</ul>

Because each of the list items has a common parent, descendant selectors can simplify the CSS markup as follow:

#nav { properties listed here }
#nav li { properties listed here }
#nav li a { properties listed here }