Clean CSS Writing

As a css designer. "How to write CSS" is a question from beginners but "How to write a Clean & optimized CSS" is a question often asked by the experts. Here is My coding style sample with the help of which you can understand and off course able to write the CSS in clean and optimized way and I also share some tips to clean your CSS after finalyzing your css code.

Clean your CSS through code
In case of huge websites I always use different css files for achieving different purposes (i.e. type.css, theme.css and default.css). But in case of small or medium website in use only one css and segregate my css file into following areas / sections

1. global reset
---------------------
- Under this section, I always reset the box issues of IE by grouping the html box tags in the scene of padding, margins and fonts.
- Also I always apply same
fonts
colors
boxes
positioning &
widths
under this section by grouping the 3rd level TOC classes i.e. In case of width .w100,#mHdr,#mMnu,#mCnt,#mFtr{Width:100%;}

2. global hacks
-----------------------
The browser specific hacks which i have to use in almost every website include in this section i.e. PNG-IE hack, hack for outlining, opacity and curves are placed here.

3. layout basic
----------------------
- The website first level TOC placed there i.e. wrapper, header, menu, content, news, footer e.t.c. & only floats, backgrounds and borders are entertained here.

4. layout deep
----------------------
- The website all levels TOC inclusive of first one which is already entertained in Layout Basic placed here i.e. In case of footer the main id is already defined in layout basic i.e #mFtr now I placed all child classes here
A simple example for it is footer griding

#mFtr .mnu (for footer menu container)
#mFtr .mnu ul, #mFtr .mnu ul li (for footer menu styling treatment individually)
#mFtr .mnu ul li a (footer menu links)

#mFtr .cR (copyrighting area / Privacy policy or terms and conditions styling treatment)
#mFtr .cR a (footer copyrighting links)

5. fonts
-----------
All fonts sizes, family and decorations are entertained here.

6. datasets
----------------
All datasets properties along with the hover effects and speeding effects are entertained under this section

7. forms
------------
This section is dedicated for the form elements. All form properties are entertained here.

CONCLUSION
*****************
Above segregation will help me to avoid redundancy and repetition of css code. for instance. I never use float:left / right in each and every class which is most common in practice instead of this i group all classes and apply the style float:left by this way a lot of extra css space is cleaned. Same in the case of widths, colors and font properties are applied. Also I never use font and color properties together in a class. Instead of this I always call both classes in my html so that i can use same font in different color or different colors in same fonts without making extra classes. NOTE that this is not only in the case of just fonts or colors. This is the main reason to utilize the sections defined above appropriately. In the end I always remove all comments and space areas by using dreamveaver find and replace option. css white space optimization

Clean your css after code
You can check unused CSS selectors with the help of firefox extension https://addons.mozilla.org/en-US/firefox/addon/5392
You can use csstidy to optimize and compress your css. You can download css tidy from http://sourceforge.net/project/showfiles.php?group_id=148404&package_id=166585 OR you can use its online optimizer from http://floele.flyspray.org/csstidy//css_optimiser.php