20 CSS Best Practices

1. Start with a Framework

http://buff.ly/1BEQynF Maintain a framework that's proven to be great instead of reinventing the tool.

2. Make it Readable

Readability of your CSS makes it much easier to maintain in the future,

3. Hyphens Instead of Underscores for CSS classes

hyphens instead while writing CSS classes and underscore for element IDs

4. Create a logical structure first

Use prototypes , create HTML structure to support the layout and start working on CSS

5. Use a Reset

Resets essentially eliminate browser inconsistencies such as heights, font sizes, margins, headings, etc. The reset allows your layout look consistent in all browsers.

6. Use Multiple Classes

It's beneficial to add multiple classes to an element.

7. Image Replacement

Jeffrey Zeldman the Kellum Method. Instead of hiding the text off, his technique hides the text while leaving it accessible to screen readers.

8. Use the Right Doctype

The entire look and feel of your site can change greatly depending on the DOCTYPE that you declare.

9. Use Shorthand CSS

The order of the sides goes clockwise, from the top, right, bottom, left. So make it easy.

10. Use an Icon Element

This approach is becoming increasingly popular following its employment in Twitter Bootstrap.

11. Comment your CSS

Add comments, its worth the pain.

12.Keep a Color Reference

If you forget the code for a specific color, you can simply check the top of the file, then copy and paste it into another section of your file.

13. Use Box-Sizing

Box-sizing calculates the dimension of an element’s box according to what was known as the “IE box model”

14. Difference Between Block vs. Inline Elements

Block elements naturally clear each line after they're declared, Inline elements take only as much space as they need.

15. Use Firebug

Many features that come bundled with the Firefox extension (debug JavaScript, inspect HTML, find errors), you can also visually inspect, modify, and edit CSS in real time.

16. Alphabetize your Properties

This can come in handy for quick scanning.

17. Avoid Extra Selectors

One common example of adding extra selectors is with lists

18. Use CSS Compressors

CSS Optimizer and CSS Compressor are two excellent online tools that can shrink CSS.

19. Use Absolute Positioning Sparingly

he layouts can get quite messy if there are multiple absolutely positioned elements in the layout. Use them sparingly

20. Don’t Forget HTML5

HTML5 is definitely critical moving forward for all websites in general. It is no longer a question of whether a given site decides to implement it but a question of when.

Thank you!

Visit : http://psibertech.com.sg/ for more information on the services and solutions that are as awesome as this post!

Please share : sharing is caring

Thumbs up if you liked what you just read

Have a lovely day