top 20 css best practises that every developer should know
DESCRIPTION
20 top CSS best practices listed for developersTRANSCRIPT
![Page 1: Top 20 CSS Best Practises that every developer should know](https://reader033.vdocuments.mx/reader033/viewer/2022060123/559799c81a28ab5b6d8b47e4/html5/thumbnails/1.jpg)
20 CSS Best Practices
![Page 2: Top 20 CSS Best Practises that every developer should know](https://reader033.vdocuments.mx/reader033/viewer/2022060123/559799c81a28ab5b6d8b47e4/html5/thumbnails/2.jpg)
1. Start with a Framework
http://buff.ly/1BEQynF Maintain a framework that's proven to be great instead of reinventing the tool.
![Page 3: Top 20 CSS Best Practises that every developer should know](https://reader033.vdocuments.mx/reader033/viewer/2022060123/559799c81a28ab5b6d8b47e4/html5/thumbnails/3.jpg)
2. Make it Readable
Readability of your CSS makes it much easier to maintain in the future,
![Page 4: Top 20 CSS Best Practises that every developer should know](https://reader033.vdocuments.mx/reader033/viewer/2022060123/559799c81a28ab5b6d8b47e4/html5/thumbnails/4.jpg)
3. Hyphens Instead of Underscores for CSS classes
hyphens instead while writing CSS classes and underscore for element IDs
![Page 5: Top 20 CSS Best Practises that every developer should know](https://reader033.vdocuments.mx/reader033/viewer/2022060123/559799c81a28ab5b6d8b47e4/html5/thumbnails/5.jpg)
4. Create a logical structure first
Use prototypes , create HTML structure to support the layout and start working on CSS
![Page 6: Top 20 CSS Best Practises that every developer should know](https://reader033.vdocuments.mx/reader033/viewer/2022060123/559799c81a28ab5b6d8b47e4/html5/thumbnails/6.jpg)
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.
![Page 7: Top 20 CSS Best Practises that every developer should know](https://reader033.vdocuments.mx/reader033/viewer/2022060123/559799c81a28ab5b6d8b47e4/html5/thumbnails/7.jpg)
6. Use Multiple Classes
It's beneficial to add multiple classes to an element.
![Page 8: Top 20 CSS Best Practises that every developer should know](https://reader033.vdocuments.mx/reader033/viewer/2022060123/559799c81a28ab5b6d8b47e4/html5/thumbnails/8.jpg)
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.
![Page 9: Top 20 CSS Best Practises that every developer should know](https://reader033.vdocuments.mx/reader033/viewer/2022060123/559799c81a28ab5b6d8b47e4/html5/thumbnails/9.jpg)
8. Use the Right Doctype
The entire look and feel of your site can change greatly depending on the DOCTYPE that you declare.
![Page 10: Top 20 CSS Best Practises that every developer should know](https://reader033.vdocuments.mx/reader033/viewer/2022060123/559799c81a28ab5b6d8b47e4/html5/thumbnails/10.jpg)
9. Use Shorthand CSS
The order of the sides goes clockwise, from the top, right, bottom, left. So make it easy.
![Page 11: Top 20 CSS Best Practises that every developer should know](https://reader033.vdocuments.mx/reader033/viewer/2022060123/559799c81a28ab5b6d8b47e4/html5/thumbnails/11.jpg)
10. Use an Icon Element
This approach is becoming increasingly popular following its employment in Twitter Bootstrap.
![Page 12: Top 20 CSS Best Practises that every developer should know](https://reader033.vdocuments.mx/reader033/viewer/2022060123/559799c81a28ab5b6d8b47e4/html5/thumbnails/12.jpg)
11. Comment your CSS
Add comments, its worth the pain.
![Page 13: Top 20 CSS Best Practises that every developer should know](https://reader033.vdocuments.mx/reader033/viewer/2022060123/559799c81a28ab5b6d8b47e4/html5/thumbnails/13.jpg)
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.
![Page 14: Top 20 CSS Best Practises that every developer should know](https://reader033.vdocuments.mx/reader033/viewer/2022060123/559799c81a28ab5b6d8b47e4/html5/thumbnails/14.jpg)
13. Use Box-Sizing
Box-sizing calculates the dimension of an element’s box according to what was known as the “IE box model”
![Page 15: Top 20 CSS Best Practises that every developer should know](https://reader033.vdocuments.mx/reader033/viewer/2022060123/559799c81a28ab5b6d8b47e4/html5/thumbnails/15.jpg)
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.
![Page 16: Top 20 CSS Best Practises that every developer should know](https://reader033.vdocuments.mx/reader033/viewer/2022060123/559799c81a28ab5b6d8b47e4/html5/thumbnails/16.jpg)
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.
![Page 17: Top 20 CSS Best Practises that every developer should know](https://reader033.vdocuments.mx/reader033/viewer/2022060123/559799c81a28ab5b6d8b47e4/html5/thumbnails/17.jpg)
16. Alphabetize your Properties
This can come in handy for quick scanning.
![Page 18: Top 20 CSS Best Practises that every developer should know](https://reader033.vdocuments.mx/reader033/viewer/2022060123/559799c81a28ab5b6d8b47e4/html5/thumbnails/18.jpg)
17. Avoid Extra Selectors
One common example of adding extra selectors is with lists
![Page 19: Top 20 CSS Best Practises that every developer should know](https://reader033.vdocuments.mx/reader033/viewer/2022060123/559799c81a28ab5b6d8b47e4/html5/thumbnails/19.jpg)
18. Use CSS Compressors
CSS Optimizer and CSS Compressor are two excellent online tools that can shrink CSS.
![Page 20: Top 20 CSS Best Practises that every developer should know](https://reader033.vdocuments.mx/reader033/viewer/2022060123/559799c81a28ab5b6d8b47e4/html5/thumbnails/20.jpg)
19. Use Absolute Positioning Sparingly
he layouts can get quite messy if there are multiple absolutely positioned elements in the layout. Use them sparingly
![Page 21: Top 20 CSS Best Practises that every developer should know](https://reader033.vdocuments.mx/reader033/viewer/2022060123/559799c81a28ab5b6d8b47e4/html5/thumbnails/21.jpg)
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.
![Page 22: Top 20 CSS Best Practises that every developer should know](https://reader033.vdocuments.mx/reader033/viewer/2022060123/559799c81a28ab5b6d8b47e4/html5/thumbnails/22.jpg)
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