TOP 5 MISTAKES OF
                            MASSIVE CSS!

                            Nicole Sullivan & Stoyan Stefanov
...
FIND US AT...


                           @stubbornella
                          @stoyanstefanov



Thursday, June 24, 2...
WHY OPTIMIZE CSS?


    • It blocks progressive rendering
     
 test: http://www.phpied.com/files/css-loading/table.php
  ...
TOP 1000 STUDY


    1. Grab top Alexa sites
    2. Start Fiddler
    3. Load each site
    4. Export from Fiddler



Thur...
<?php

        $file = file('alexa.txt');

        foreach ($file as $url) {

                  launch($url);

        }

...
42% DON’T GZIP CSS




Thursday, June 24, 2010
44% HAVE MORE THAN 2
                 CSS FILES
                          56%

                                44%




Thu...
56% SERVE CSS WITH
                               COOKIES




Thursday, June 24, 2010
62% DON’T MINIFY




         would get more than 10% savings from YUI compressor
Thursday, June 24, 2010
21% HAVE >100K OF CSS
                                21%


                          11%
                          11%


...
HASTE TRACE-BASED PACKAGING




                                                            homepage     homepage
        ...
KUDZU
      Was introduced to the United States between 1935 and 1950
       by the Soil Conservation Service to prevent s...
CSS KUDZU!


Thursday, June 24, 2010
“OBJECT ORIENTED CSS
                   SOUNDS GREAT, BUT WE
                    HAVE A GIANT MESS!”
                     ...
FACEBOOK DECIDED TO
                  GO ON A DIET
                          The CSS was one piece of the puzzle




Thurs...
Jason Sobel -
                          Perf Manager Fu

                            MANY PIECES                    Nan Ga...
THEY REDUCED THEIR
            RESPONSE TIME BY HALF
                          in only six months




Thursday, June 24, 2...
WHAT IS OBJECT
                          ORIENTED CSS?
                          A philosophy? A framework? A tool?




Th...
MORE LIKE AN EVOLUTION
      OF THE LANGUAGE
                          it makes CSS more powerful




Thursday, June 24, 2...
HOW IS IT DIFFERENT?


                               ul{...}
                            ul li{...}
                     ...
HOW IS IT DIFFERENT?


                               ul{...}
                            ul li{...}
                     ...
HOW IS IT DIFFERENT?


                                    ul{...}
                                 ul li{...}
           ...
MUCH LESS CODE
                            easier to work with newbies




Thursday, June 24, 2010
GRIDS
    •   574 bytes

    •   14 lines of code

    •   Percentage widths adapt to
        different page sizes

    • ...
GRANULARITY FAIL
                             + STALE RULES
                          + UNPREDICTABILITY
                 ...
5                   Text


                            GRANULARITY FAIL
                          the CSS objects shouldn’...
Thursday, June 24, 2010
Thursday, June 24, 2010
Thursday, June 24, 2010
http://www.brickartist.com/
Thursday, June 24, 2010
http://www.brickartist.com/
Thursday, June 24, 2010
WE WANT TO DO THE
                SAME THING WITH CSS




Thursday, June 24, 2010
CREATE THE
                          BUILDING BLOCKS




Thursday, June 24, 2010
MOST SITES GET THE
               GRANULARITY WRONG
                          and their architecture is set up to fail



...
HOW? FIRST, A VISUAL
                     INVENTORY




Thursday, June 24, 2010
TAKE A PHP OBJECT
Thursday, June 24, 2010
BREAK IT DOWN
Thursday, June 24, 2010
7 SMALLER OBJECTS




Thursday, June 24, 2010
headings




Thursday, June 24, 2010
HEADINGS
   Heading      - 16px bold #3B5998
   Heading     - 16px normal #333333
   Heading     - 15px bold #3B5998     •...
IT’S ALL ABOUT PATTERN
                    MATCHING
                          but you have to take a step back




Thursda...
PHP OBJECTS != CSS OBJECTS
                          you will be tempted, beware!




Thursday, June 24, 2010
4        Text


                          STALE RULES
                              CSS gets crufty



Thursday, June 24, ...
STALE IS TWO THINGS



    ❖   Truly stale - rules that are no longer used on the site
    ❖   Rules used on subsequent PV...
WHAT KIND DO YOU
                               HAVE?




Thursday, June 24, 2010
WHAT KIND DO YOU
                               HAVE?


    ❖   Try dust-me selectors




Thursday, June 24, 2010
WHAT KIND DO YOU
                               HAVE?


    ❖   Try dust-me selectors
    ❖   Track them over time -
     ...
3            Text


                          UNPREDICTABILITY
               Make each object predictable and location in...
h3




Thursday, June 24, 2010
h3




Thursday, June 24, 2010
A      Heading should not become a          Heading

                                in another part of the page.




Thur...
AVOID
                                 EXAMPLE
                          #weatherModule h3{color:red;}
                   ...
HOW DO YOU TEST FOR
             UNPREDICTABLE CODE?
                          #foo h3{...}
                          #bar...
h1-h6
                     How many? You need site-wide headings




Thursday, June 24, 2010
511
                          declarations setting styles for h1-h6


  56% >10
  9% >100
Thursday, June 24, 2010
HEADINGS BEFORE



                            958
                              declarations h1-h6



                   ...
HEADINGS AFTER:



                              25
                                    Chad Little - Facebook
Thursday, J...
2                   Text


                           SPECIFICITY WARS
                          lobbing specificity grenad...
SPECIFICITY SCREWS UP
                  THE CASCADE
                          and the cascade kind of rocks, so how do we ...
SIMPLIFY SPECIFICITY




Thursday, June 24, 2010
.mod .hd{...}
.ie .mod .hd{...}
.weatherMod .hd {...}




                USE HACKS SPARINGLY
                          An...
.mod .hd{...}
           X
.ie .mod .hd{...}
.weatherMod .hd {...}




                USE HACKS SPARINGLY
               ...
#navigation{...}
    #header{...}




                          AVOID STYLING IDS
                          IDs impact spe...
X
    #navigation{...}
    #header{...}




                          AVOID STYLING IDS
                          IDs impa...
.nav {color: red !important;}




                          AVOID !IMPORTANT
                              except on leaf ...
.nav {color: red !important;}   X

                          AVOID !IMPORTANT
                              except on leaf...
!IMPORTANT



                           518
                          declarations using important



 12% have greater t...
div.error{...}




                          STYLE CLASSES
                               rather than elements




Thursda...
X
              div.error{...}




                          STYLE CLASSES
                               rather than elem...
X
              div.error{...}




                          STYLE CLASSES
                               rather than elem...
html body .myModule div .hd{...}
.myModule2 .hd {...}


                              GIVE RULES THE
                     ...
X
html body .myModule div .hd{...}
.myModule2 .hd {...}


                              GIVE RULES THE
                   ...
1           Text


                          DUPLICATION
                              CSS kudzu on steroids



Thursday, ...
GREP IS YOUR FRIEND
                    look at the stylesheets globally rather than per page




Thursday, June 24, 2010
margintoo many? You need reset.css




Thursday, June 24, 2010
518
                          declarations reset margin to zero


  64% > 10
 14% > 100
Thursday, June 24, 2010
float
                          too many? You need grids




Thursday, June 24, 2010
733
                          declarations floated elements


  56% > 10
 13% > 100
Thursday, June 24, 2010
font-size            headings may be disguised in class names




Thursday, June 24, 2010
FONT-SIZE



                             889
                          declarations changed the font-size


 78% >10
 23%...
HOW DID FACEBOOK
                REDUCE DUPLICATION?
                          let’s look at an example




Thursday, June...
MEDIA BLOCK EXAMPLE




Thursday, June 24, 2010
ALL OF THESE ARE THE
                       SAME OBJECT




Thursday, June 24, 2010
WHAT DO WE KNOW?

                          ❖ Can be nested
                          ❖ Optional right button

           ...
WHAT DON’T WE KNOW?

                          ❖ Image width and decoration vary
                          ❖ Right content...
SEPARATE STRUCTURE
                        FROM CHROME




Thursday, June 24, 2010
A FEW LINES OF HTML...

            <div class="media attribution">
              <a href="http://twitter.com/stubbornella...
4 LINES OF CSS...




Thursday, June 24, 2010
Thursday, June 24, 2010
HTML SIZE
                      reduced by 50%




                                   by Stefan Parker
Thursday, June 24, ...
“Due to these efforts, we cut our average
            CSS bytes per page by 19% (after gzip) and
            HTML bytes pe...
LET’S KEEP TALKING...
                                www.stubbornella.org
                                  @stubbornella...
Upcoming SlideShare
Loading in...5
×

5 Mistakes of Massive CSS

19,553

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
5 Comments
106 Likes
Statistics
Notes
No Downloads
Views
Total Views
19,553
On Slideshare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
0
Comments
5
Likes
106
Embeds 0
No embeds

No notes for slide

5 Mistakes of Massive CSS

  1. 1. TOP 5 MISTAKES OF MASSIVE CSS! Nicole Sullivan & Stoyan Stefanov Thursday, June 24, 2010
  2. 2. FIND US AT... @stubbornella @stoyanstefanov Thursday, June 24, 2010
  3. 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. 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. 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. 6. 42% DON’T GZIP CSS Thursday, June 24, 2010
  7. 7. 44% HAVE MORE THAN 2 CSS FILES 56% 44% Thursday, June 24, 2010
  8. 8. 56% SERVE CSS WITH COOKIES Thursday, June 24, 2010
  9. 9. 62% DON’T MINIFY would get more than 10% savings from YUI compressor Thursday, June 24, 2010
  10. 10. 21% HAVE >100K OF CSS 21% 11% 11% 44% 24% Thursday, June 24, 2010
  11. 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. 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. 13. CSS KUDZU! Thursday, June 24, 2010
  14. 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. 15. FACEBOOK DECIDED TO GO ON A DIET The CSS was one piece of the puzzle Thursday, June 24, 2010
  16. 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. 17. THEY REDUCED THEIR RESPONSE TIME BY HALF in only six months Thursday, June 24, 2010
  18. 18. WHAT IS OBJECT ORIENTED CSS? A philosophy? A framework? A tool? Thursday, June 24, 2010
  19. 19. MORE LIKE AN EVOLUTION OF THE LANGUAGE it makes CSS more powerful Thursday, June 24, 2010
  20. 20. HOW IS IT DIFFERENT? ul{...} ul li{...} ul li a{...} Thursday, June 24, 2010
  21. 21. HOW IS IT DIFFERENT? ul{...} ul li{...} ul li a{...} Until now, we focused all our effort here Thursday, June 24, 2010
  22. 22. HOW IS IT DIFFERENT? ul{...} ul li{...} ul li a{...} But, the architecture lives here Thursday, June 24, 2010
  23. 23. MUCH LESS CODE easier to work with newbies Thursday, June 24, 2010
  24. 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. 25. GRANULARITY FAIL + STALE RULES + UNPREDICTABILITY + DUPLICATION + SPECIFICITY WARS = MASSIVE CSS Thursday, June 24, 2010
  26. 26. 5 Text GRANULARITY FAIL the CSS objects shouldn’t match the PHP objects Thursday, June 24, 2010
  27. 27. Thursday, June 24, 2010
  28. 28. Thursday, June 24, 2010
  29. 29. Thursday, June 24, 2010
  30. 30. http://www.brickartist.com/ Thursday, June 24, 2010
  31. 31. http://www.brickartist.com/ Thursday, June 24, 2010
  32. 32. WE WANT TO DO THE SAME THING WITH CSS Thursday, June 24, 2010
  33. 33. CREATE THE BUILDING BLOCKS Thursday, June 24, 2010
  34. 34. MOST SITES GET THE GRANULARITY WRONG and their architecture is set up to fail Thursday, June 24, 2010
  35. 35. HOW? FIRST, A VISUAL INVENTORY Thursday, June 24, 2010
  36. 36. TAKE A PHP OBJECT Thursday, June 24, 2010
  37. 37. BREAK IT DOWN Thursday, June 24, 2010
  38. 38. 7 SMALLER OBJECTS Thursday, June 24, 2010
  39. 39. headings Thursday, June 24, 2010
  40. 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. 41. IT’S ALL ABOUT PATTERN MATCHING but you have to take a step back Thursday, June 24, 2010
  42. 42. PHP OBJECTS != CSS OBJECTS you will be tempted, beware! Thursday, June 24, 2010
  43. 43. 4 Text STALE RULES CSS gets crufty Thursday, June 24, 2010
  44. 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. 45. WHAT KIND DO YOU HAVE? Thursday, June 24, 2010
  46. 46. WHAT KIND DO YOU HAVE? ❖ Try dust-me selectors Thursday, June 24, 2010
  47. 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. 48. 3 Text UNPREDICTABILITY Make each object predictable and location independent Thursday, June 24, 2010
  49. 49. h3 Thursday, June 24, 2010
  50. 50. h3 Thursday, June 24, 2010
  51. 51. A Heading should not become a Heading in another part of the page. Thursday, June 24, 2010
  52. 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. 53. HOW DO YOU TEST FOR UNPREDICTABLE CODE? #foo h3{...} #bar h3{...} #baz h3{...} grep h[1-6] Thursday, June 24, 2010
  54. 54. h1-h6 How many? You need site-wide headings Thursday, June 24, 2010
  55. 55. 511 declarations setting styles for h1-h6 56% >10 9% >100 Thursday, June 24, 2010
  56. 56. HEADINGS BEFORE 958 declarations h1-h6 Facebook Thursday, June 24, 2010
  57. 57. HEADINGS AFTER: 25 Chad Little - Facebook Thursday, June 24, 2010
  58. 58. 2 Text SPECIFICITY WARS lobbing specificity grenades over the cube wall Thursday, June 24, 2010
  59. 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. 60. SIMPLIFY SPECIFICITY Thursday, June 24, 2010
  61. 61. .mod .hd{...} .ie .mod .hd{...} .weatherMod .hd {...} USE HACKS SPARINGLY And don’t let them change your specificity Thursday, June 24, 2010
  62. 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. 63. #navigation{...} #header{...} AVOID STYLING IDS IDs impact specificity and can’t be reused IDs are for JS Thursday, June 24, 2010
  64. 64. X #navigation{...} #header{...} AVOID STYLING IDS IDs impact specificity and can’t be reused IDs are for JS Thursday, June 24, 2010
  65. 65. .nav {color: red !important;} AVOID !IMPORTANT except on leaf nodes Thursday, June 24, 2010
  66. 66. .nav {color: red !important;} X AVOID !IMPORTANT except on leaf nodes Thursday, June 24, 2010
  67. 67. !IMPORTANT 518 declarations using important 12% have greater than 50 Thursday, June 24, 2010
  68. 68. div.error{...} STYLE CLASSES rather than elements Thursday, June 24, 2010
  69. 69. X div.error{...} STYLE CLASSES rather than elements .error{ most of the code goes here } Thursday, June 24, 2010
  70. 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. 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. 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. 73. 1 Text DUPLICATION CSS kudzu on steroids Thursday, June 24, 2010
  74. 74. GREP IS YOUR FRIEND look at the stylesheets globally rather than per page Thursday, June 24, 2010
  75. 75. margintoo many? You need reset.css Thursday, June 24, 2010
  76. 76. 518 declarations reset margin to zero 64% > 10 14% > 100 Thursday, June 24, 2010
  77. 77. float too many? You need grids Thursday, June 24, 2010
  78. 78. 733 declarations floated elements 56% > 10 13% > 100 Thursday, June 24, 2010
  79. 79. font-size headings may be disguised in class names Thursday, June 24, 2010
  80. 80. FONT-SIZE 889 declarations changed the font-size 78% >10 23% >100 Thursday, June 24, 2010
  81. 81. HOW DID FACEBOOK REDUCE DUPLICATION? let’s look at an example Thursday, June 24, 2010
  82. 82. MEDIA BLOCK EXAMPLE Thursday, June 24, 2010
  83. 83. ALL OF THESE ARE THE SAME OBJECT Thursday, June 24, 2010
  84. 84. WHAT DO WE KNOW? ❖ Can be nested ❖ Optional right button ❖ Must clearfix Thursday, June 24, 2010
  85. 85. WHAT DON’T WE KNOW? ❖ Image width and decoration vary ❖ Right content is unknown ❖ Width unknown Thursday, June 24, 2010
  86. 86. SEPARATE STRUCTURE FROM CHROME Thursday, June 24, 2010
  87. 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. 88. 4 LINES OF CSS... Thursday, June 24, 2010
  89. 89. Thursday, June 24, 2010
  90. 90. HTML SIZE reduced by 50% by Stefan Parker Thursday, June 24, 2010
  91. 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. 92. LET’S KEEP TALKING... www.stubbornella.org @stubbornella http://phpied.com @stoyanstefanov OOCSS Project: http://github.com/stubbornella/oocss/ Thursday, June 24, 2010

×