5 Mistakes of Massive CSS

33,347 views
31,917 views

Published on

Nicole Sullivan and Stoyan Stefanov discuss their work optimizing CSS at Facebook and Yahoo!, As well as the state of CSS optimizations in the Alexa Top 1000 websites. What a mess!

From Velocity Conference and Texas-Javascript.

Published in: Technology, Education
6 Comments
112 Likes
Statistics
Notes
No Downloads
Views
Total views
33,347
On SlideShare
0
From Embeds
0
Number of Embeds
1,648
Actions
Shares
0
Downloads
0
Comments
6
Likes
112
Embeds 0
No embeds

No notes for slide

5 Mistakes of Massive CSS

  1. TOP 5 MISTAKES OF MASSIVE CSS! Nicole Sullivan & Stoyan Stefanov Thursday, June 24, 2010
  2. FIND US AT... @stubbornella @stoyanstefanov Thursday, June 24, 2010
  3. WHY OPTIMIZE CSS? • It blocks progressive rendering test: http://www.phpied.com/files/css-loading/table.php • It’s verbose (property value pairs cannot be minified like JS) text-decoration: underline != td: u Thursday, June 24, 2010
  4. TOP 1000 STUDY 1. Grab top Alexa sites 2. Start Fiddler 3. Load each site 4. Export from Fiddler Thursday, June 24, 2010
  5. <?php $file = file('alexa.txt'); foreach ($file as $url) { launch($url); } function launch($url) { try { $ie = new COM("InternetExplorer.Application"); $ie->Visible = true; $ie->Navigate2($url); while ($ie->ReadyState != 4) sleep(1); $ie->Quit(); } catch (Exception $e) {} } ?> Thursday, June 24, 2010
  6. 42% DON’T GZIP CSS Thursday, June 24, 2010
  7. 44% HAVE MORE THAN 2 CSS FILES 56% 44% Thursday, June 24, 2010
  8. 56% SERVE CSS WITH COOKIES Thursday, June 24, 2010
  9. 62% DON’T MINIFY would get more than 10% savings from YUI compressor Thursday, June 24, 2010
  10. 21% HAVE >100K OF CSS 21% 11% 11% 44% 24% Thursday, June 24, 2010
  11. HASTE TRACE-BASED PACKAGING homepage homepage Date CSS files CSS weight files weight Nov 2008 487 1.7MB 24 69KB May 2009 706 1.9MB 15 64KB http://velocityconference.blip.tv/file/2293221/ David Wei & Changhao Jiang Thursday, June 24, 2010
  12. KUDZU Was introduced to the United States between 1935 and 1950 by the Soil Conservation Service to prevent soil erosion. Thursday, June 24, 2010
  13. CSS KUDZU! Thursday, June 24, 2010
  14. “OBJECT ORIENTED CSS SOUNDS GREAT, BUT WE HAVE A GIANT MESS!” how do we get from here to there? Thursday, June 24, 2010
  15. FACEBOOK DECIDED TO GO ON A DIET The CSS was one piece of the puzzle Thursday, June 24, 2010
  16. Jason Sobel - Perf Manager Fu MANY PIECES Nan Gao Kyle Delong - PHP David Wei & Changhao Jiang BigPipe Marcel Laverdet - Tom Occhino - JS XHP Makinde Shaun McIntyre - Adeagbo - JS Automated Spriting Thursday, June 24, 2010
  17. THEY REDUCED THEIR RESPONSE TIME BY HALF in only six months Thursday, June 24, 2010
  18. WHAT IS OBJECT ORIENTED CSS? A philosophy? A framework? A tool? Thursday, June 24, 2010
  19. MORE LIKE AN EVOLUTION OF THE LANGUAGE it makes CSS more powerful Thursday, June 24, 2010
  20. HOW IS IT DIFFERENT? ul{...} ul li{...} ul li a{...} Thursday, June 24, 2010
  21. HOW IS IT DIFFERENT? ul{...} ul li{...} ul li a{...} Until now, we focused all our effort here Thursday, June 24, 2010
  22. HOW IS IT DIFFERENT? ul{...} ul li{...} ul li a{...} But, the architecture lives here Thursday, June 24, 2010
  23. MUCH LESS CODE easier to work with newbies Thursday, June 24, 2010
  24. GRIDS • 574 bytes • 14 lines of code • Percentage widths adapt to different page sizes • Includes halfs, thirds, fourths, and fifths • No gutters • Infinite nesting and stacking Thursday, June 24, 2010
  25. GRANULARITY FAIL + STALE RULES + UNPREDICTABILITY + DUPLICATION + SPECIFICITY WARS = MASSIVE CSS Thursday, June 24, 2010
  26. 5 Text GRANULARITY FAIL the CSS objects shouldn’t match the PHP objects Thursday, June 24, 2010
  27. Thursday, June 24, 2010
  28. Thursday, June 24, 2010
  29. Thursday, June 24, 2010
  30. http://www.brickartist.com/ Thursday, June 24, 2010
  31. http://www.brickartist.com/ Thursday, June 24, 2010
  32. WE WANT TO DO THE SAME THING WITH CSS Thursday, June 24, 2010
  33. CREATE THE BUILDING BLOCKS Thursday, June 24, 2010
  34. MOST SITES GET THE GRANULARITY WRONG and their architecture is set up to fail Thursday, June 24, 2010
  35. HOW? FIRST, A VISUAL INVENTORY Thursday, June 24, 2010
  36. TAKE A PHP OBJECT Thursday, June 24, 2010
  37. BREAK IT DOWN Thursday, June 24, 2010
  38. 7 SMALLER OBJECTS Thursday, June 24, 2010
  39. headings Thursday, June 24, 2010
  40. HEADINGS Heading - 16px bold #3B5998 Heading - 16px normal #333333 Heading - 15px bold #3B5998 • 12px headings eliminated Heading - 15px normal #333333 Heading - 14px bold #3B5998 • Blue only for links Heading - 14px normal #333333 Heading - 13px bold #3B5998 • Bold for all titles Heading - 13px normal #333333 • Chad Little went through Heading - 11px bold #3B5998 the entire site eliminating Heading - 11px normal #333333 duplicates. Thursday, June 24, 2010
  41. IT’S ALL ABOUT PATTERN MATCHING but you have to take a step back Thursday, June 24, 2010
  42. PHP OBJECTS != CSS OBJECTS you will be tempted, beware! Thursday, June 24, 2010
  43. 4 Text STALE RULES CSS gets crufty Thursday, June 24, 2010
  44. STALE IS TWO THINGS ❖ Truly stale - rules that are no longer used on the site ❖ Rules used on subsequent PV or activated on user action Thursday, June 24, 2010
  45. WHAT KIND DO YOU HAVE? Thursday, June 24, 2010
  46. WHAT KIND DO YOU HAVE? ❖ Try dust-me selectors Thursday, June 24, 2010
  47. WHAT KIND DO YOU HAVE? ❖ Try dust-me selectors ❖ Track them over time - ‣ changes are more important than an absolute number Thursday, June 24, 2010
  48. 3 Text UNPREDICTABILITY Make each object predictable and location independent Thursday, June 24, 2010
  49. h3 Thursday, June 24, 2010
  50. h3 Thursday, June 24, 2010
  51. A Heading should not become a Heading in another part of the page. Thursday, June 24, 2010
  52. AVOID EXAMPLE #weatherModule h3{color:red;} #tabs h3{color:blue} ❖ Global color undefined for h3, so it will be ‣ unstyled in new modules, ‣ developers forced to write more CSS for the same style Thursday, June 24, 2010
  53. HOW DO YOU TEST FOR UNPREDICTABLE CODE? #foo h3{...} #bar h3{...} #baz h3{...} grep h[1-6] Thursday, June 24, 2010
  54. h1-h6 How many? You need site-wide headings Thursday, June 24, 2010
  55. 511 declarations setting styles for h1-h6 56% >10 9% >100 Thursday, June 24, 2010
  56. HEADINGS BEFORE 958 declarations h1-h6 Facebook Thursday, June 24, 2010
  57. HEADINGS AFTER: 25 Chad Little - Facebook Thursday, June 24, 2010
  58. 2 Text SPECIFICITY WARS lobbing specificity grenades over the cube wall Thursday, June 24, 2010
  59. SPECIFICITY SCREWS UP THE CASCADE and the cascade kind of rocks, so how do we use the good parts? Thursday, June 24, 2010
  60. SIMPLIFY SPECIFICITY Thursday, June 24, 2010
  61. .mod .hd{...} .ie .mod .hd{...} .weatherMod .hd {...} USE HACKS SPARINGLY And don’t let them change your specificity Thursday, June 24, 2010
  62. .mod .hd{...} X .ie .mod .hd{...} .weatherMod .hd {...} USE HACKS SPARINGLY And don’t let them change your specificity .mod .hd{color: red; _zoom:1;} .weatherMod .hd{...} Thursday, June 24, 2010
  63. #navigation{...} #header{...} AVOID STYLING IDS IDs impact specificity and can’t be reused IDs are for JS Thursday, June 24, 2010
  64. X #navigation{...} #header{...} AVOID STYLING IDS IDs impact specificity and can’t be reused IDs are for JS Thursday, June 24, 2010
  65. .nav {color: red !important;} AVOID !IMPORTANT except on leaf nodes Thursday, June 24, 2010
  66. .nav {color: red !important;} X AVOID !IMPORTANT except on leaf nodes Thursday, June 24, 2010
  67. !IMPORTANT 518 declarations using important 12% have greater than 50 Thursday, June 24, 2010
  68. div.error{...} STYLE CLASSES rather than elements Thursday, June 24, 2010
  69. X div.error{...} STYLE CLASSES rather than elements .error{ most of the code goes here } Thursday, June 24, 2010
  70. X div.error{...} STYLE CLASSES rather than elements .error{ most of the code goes here } div.error{ } p.error{ exceptions only } em.error{ } Thursday, June 24, 2010
  71. html body .myModule div .hd{...} .myModule2 .hd {...} GIVE RULES THE SAME STRENGTH Use cascade order to overwrite previous rules Thursday, June 24, 2010
  72. X html body .myModule div .hd{...} .myModule2 .hd {...} GIVE RULES THE SAME STRENGTH Use cascade order to overwrite previous rules .myModule .hd{...} .myModule2 .hd{...} Thursday, June 24, 2010
  73. 1 Text DUPLICATION CSS kudzu on steroids Thursday, June 24, 2010
  74. GREP IS YOUR FRIEND look at the stylesheets globally rather than per page Thursday, June 24, 2010
  75. margintoo many? You need reset.css Thursday, June 24, 2010
  76. 518 declarations reset margin to zero 64% > 10 14% > 100 Thursday, June 24, 2010
  77. float too many? You need grids Thursday, June 24, 2010
  78. 733 declarations floated elements 56% > 10 13% > 100 Thursday, June 24, 2010
  79. font-size headings may be disguised in class names Thursday, June 24, 2010
  80. FONT-SIZE 889 declarations changed the font-size 78% >10 23% >100 Thursday, June 24, 2010
  81. HOW DID FACEBOOK REDUCE DUPLICATION? let’s look at an example Thursday, June 24, 2010
  82. MEDIA BLOCK EXAMPLE Thursday, June 24, 2010
  83. ALL OF THESE ARE THE SAME OBJECT Thursday, June 24, 2010
  84. WHAT DO WE KNOW? ❖ Can be nested ❖ Optional right button ❖ Must clearfix Thursday, June 24, 2010
  85. WHAT DON’T WE KNOW? ❖ Image width and decoration vary ❖ Right content is unknown ❖ Width unknown Thursday, June 24, 2010
  86. SEPARATE STRUCTURE FROM CHROME Thursday, June 24, 2010
  87. A FEW LINES OF HTML... <div class="media attribution"> <a href="http://twitter.com/stubbornella" class="img"> <img src="mini.jpg" alt="Stubbornella" /> </a> <div class="bd">@Stubbornella 14 minutes ago</div> </div> Thursday, June 24, 2010
  88. 4 LINES OF CSS... Thursday, June 24, 2010
  89. Thursday, June 24, 2010
  90. HTML SIZE reduced by 50% by Stefan Parker Thursday, June 24, 2010
  91. “Due to these efforts, we cut our average CSS bytes per page by 19% (after gzip) and HTML bytes per page by 44% (before gzip).” Jason Sobel http://www.facebook.com/note.php?note_id=307069903919 Thursday, June 24, 2010
  92. LET’S KEEP TALKING... www.stubbornella.org @stubbornella http://phpied.com @stoyanstefanov OOCSS Project: http://github.com/stubbornella/oocss/ Thursday, June 24, 2010

×