CSS Optimization Rules

The rules should follow to increase the performance in CSS

1. Decide whether you are using HTML4 or HTML5. Determine the DOCTYPE and CSS3 (border-radius) according to that. Dont use CSS3 in HTML4. CSS3 is especially developed for HTML5.
2. Try to write the all class property in single line instead indent code.
3. Use always lower case for both HTML and CSS
4. Use shorthand properties-each rule on a single line.
5. Use h1 to h6 for site SEO.
6. Change 0px to just ‘0’.
7. Change color code "#000000" to "#000".
8. Change font-weight from “normal" to "400".
9. Change font-weight from “bold" to "700".
10. Use CSS Sprits.
11. Use single CSS file, if more than one, combine all CSS file into single file.
12. Avoid writing inline / internal CSS.
13. Use Link instead of @import the CSS file.
14. Group the similar styles with comma separator.
15. Minimize the number of iframes.
16. Use PNG image.
17. Dont use Hack in the code, instead write separate CSS for IE.
18. Margin / Padding change from "38px 52px 59px 52px" to "38px 52px 59px".
19. Margin / Padding change from "0px 0px 0px 0px !important" to "0 !important".
20. Background (set url, color, repeat and all property in single line).
21. Font (set font family, size/line height and all property in single line).
22. Remove empty selectors.
23. Avoid using duplicates.
24. Remove unnecessary white spacing.
25. Use margin/padding instead of m/ p right, m/p left separately.
26. Font, background, margin, padding, border properties should be merged.
27. Last semicolon should be removed in every block.
28. Don’t need those extra zeros in opacity (0.5), margin (10.0em) , padding(5.3em).
29. Remove comments from production file.
30. Validate your CSS file.
31. Follow the plug-in such as Yslow, Google page speed for more optimization.
32. Always write re-usable styles in separate class, dont refer to any parent element. Eg(.button{color:#aeaeae}, dont specify .leftPan button{color:#aeaeae}