CSS Performance

Some Performance points for css.

Transcript

1. CSS Performance By @crazyrohila
2. I am Sanjay I know some things about #ubuntu, #drupal, #css(3), #html5, #responsiveness. and I work @srijan as front-end and drupal developer. http://www.crazyrohila.com/ Twitter:- @crazyrohila github:- https://github.com/crazyrohila D.Org:- http://drupal.org/user/1274328
3. Key Selector *) Browser reads from right to left. *) .social-sharing-links a { } browser will assess all 'a', then will select which are in 'social-sharing-links' class *) .social-sharing-links .social-links { } So Now It will assess only anchor tag with 'social-links' class.
4. Over Qualifying selectors #nav ul li a { } we can reduce it to #nav a { }
5. Is this working? .label { display: inline; width: 20px; } If you defining width, then why display: inline ? Use Css-Lint to check what you have but not useful.
6. Reduce number of lines *) Reduce the number of lines in css. *) When working with team, be aware of repetition.
7. Reduce Request for css files *) Use One file of css at production site. *) Use Minified or ziped file. *) Use cache for css files with long expire headers.
8. Use Icon fonts, they are awesome! *) Some images can be removed by icon fonts. http://www.entypo.com/ http://icomoon.io/ there are many more. some are paid. some are free. *) Some patterns image can be removed by gradient. http://lea.verou.me/css3patterns/ and http://crazyrohila.github.io/ugly-css3patterns/ (the ugly one).
9. Sprite Image *) Every Image make an extra http request. *) Should use Image sprites to combine them into one.
10. DATA-URI Its saves http request. Its pure data content embedded in html/css. Very performative if css file is cached. background:url(data:image/gif;base64, R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl 3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hB ADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBM QiB0UjIQA7); Having a CSS file that is 300k instead of 50k is fine if it saves 6 HTTP requests and if cached. Read more at http://css-tricks.com/data-uris/ .
11. When using preprocessor *) Nesting is awesome. But use with care. don't go crazy with nesting. . header { nav { ul { li { a { } } } } } after compile in css, it will be:- .header nav ul li a {}
12. Responsive Design *) When designing responsive, Go with Mobile first approach. *) It saves overriding of css in media query.
13. Thank You :) http://www.crazyrohila.com/ Twitter:- @crazyrohila github:- https://github.com/crazyrohila D.Org:- http://drupal.org/user/1274328