top 20 css best practises that every developer should know
Post on 04-Jul-2015
234 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related