Web Performance CSS Right to Left

1. Web Performance CSS Right to Left Jeremy Solarz @jeremysolarz Web Performance Group @ Meetup

2. https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS?redirectlocale=en-US&redirectslug=Writing_Efficient_CSS#How_the_Style_System_Matches_Ruleshttps://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS?redirectlocale=en-US&redirectslug=Writing_Efficient_CSS#How_the_Style_System_Matches_Rules “The style system matches rules by starting with the key selector, then moving to the left (looking for any ancestors in the rule’s selector). As long as the selector’s subtree continues to check out, the style system continues moving to the left until it either matches the rule, or abandons because of a mismatch.” Web Performance Group @ Meetup

3. Example http://stevesouders.com/efws/css-selectors/descendant.php Web Performance Group @ Meetup

4. Reflow in Mozilla http://www.youtube.com/watch?feature=player_embedded&v=ZTnIxIA5KGw http://snook.ca/archives/html_and_css/css-parent-selectors Web Performance Group @ Meetup

5. Now we know… • Why CSS at the top • Don’t use div#id, h1 div, etc. • The “key selector” is key • Think about your jQuery selectors ;) Web Performance Group @ Meetup

6. Online Simplifying CSS Selectors, http://www.stevesouders.com/blog/2009/06/18/simplifying-css-selectors/ Google Efficient CSS, https://developers.google.com/speed/docs/best-practices/rendering#UseEfficientCSSSelectors Google best practices, https://developers.google.com/speed/docs/best-practices/rendering?hl=de CSSLint, http://csslint.net/ Web Performance Group @ Meetup 6

7. ? Web Performance Group @ Meetup

8. Last words Please review the meetup on, http://www.meetup.com/Vienna-Web-Performance-Group/events/100038222/ Next Meetup: 20.03.2013 Web Performance Group @ Meetup