• Save
5 Mistakes of Massive CSS
Upcoming SlideShare
Loading in...5
×
 

5 Mistakes of Massive CSS

on

  • 19,744 views

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! ...

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.

Statistics

Views

Total Views
19,744
Views on SlideShare
18,166
Embed Views
1,578

Actions

Likes
99
Downloads
0
Comments
5

34 Embeds 1,578

http://d.hatena.ne.jp 619
http://blog.dreamcss.com 595
http://onwebdev.blogspot.com 154
http://www.redditmedia.com 101
http://www.slideshare.net 31
http://onwebdev.blogspot.com.au 7
http://onwebdev.blogspot.co.uk 6
http://onwebdev.blogspot.com.es 6
http://interactive.lukkien.com 5
http://blog.gabrieleromanato.com 5
http://onwebdev.blogspot.co.il 4
https://si0.twimg.com 4
http://a0.twimg.com 4
http://127.0.0.1 4
http://reddit-roll.com 4
http://core.traackr.com 4
http://onwebdev.blogspot.co.nz 2
http://onwebdev.blogspot.in 2
http://onwebdev.blogspot.com.ar 2
http://translate.googleusercontent.com 2
http://wixpulse.com 2
http://hatenadesign.g.hatena.ne.jp 2
http://192.168.6.52 2
https://www.redditmedia.com 1
http://www.taaza.com 1
http://onwebdev.blogspot.hu 1
http://onwebdev.blogspot.sg 1
http://onwebdev.blogspot.mx 1
https://twimg0-a.akamaihd.net 1
http://s.deeeki.com 1
https://roxy4happy.appspot.com 1
http://192.168.2.21:86 1
http://www.vfresh.org 1
https://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

5 Mistakes of Massive CSS 5 Mistakes of Massive CSS Presentation Transcript

  • TOP 5 MISTAKES OF MASSIVE CSS! Nicole Sullivan & Stoyan Stefanov Thursday, June 24, 2010
  • FIND US AT... @stubbornella @stoyanstefanov Thursday, June 24, 2010
  • 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
  • TOP 1000 STUDY 1. Grab top Alexa sites 2. Start Fiddler 3. Load each site 4. Export from Fiddler Thursday, June 24, 2010
  • <?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
  • 42% DON’T GZIP CSS Thursday, June 24, 2010
  • 44% HAVE MORE THAN 2 CSS FILES 56% 44% Thursday, June 24, 2010
  • 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% 44% 24% Thursday, June 24, 2010
  • 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
  • KUDZU Was introduced to the United States between 1935 and 1950 by the Soil Conservation Service to prevent soil erosion. Thursday, June 24, 2010
  • CSS KUDZU! Thursday, June 24, 2010
  • “OBJECT ORIENTED CSS SOUNDS GREAT, BUT WE HAVE A GIANT MESS!” how do we get from here to there? Thursday, June 24, 2010
  • FACEBOOK DECIDED TO GO ON A DIET The CSS was one piece of the puzzle Thursday, June 24, 2010
  • 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
  • THEY REDUCED THEIR RESPONSE TIME BY HALF in only six months Thursday, June 24, 2010
  • WHAT IS OBJECT ORIENTED CSS? A philosophy? A framework? A tool? Thursday, June 24, 2010
  • MORE LIKE AN EVOLUTION OF THE LANGUAGE it makes CSS more powerful Thursday, June 24, 2010
  • HOW IS IT DIFFERENT? ul{...} ul li{...} ul li a{...} Thursday, June 24, 2010
  • HOW IS IT DIFFERENT? ul{...} ul li{...} ul li a{...} Until now, we focused all our effort here Thursday, June 24, 2010
  • HOW IS IT DIFFERENT? ul{...} ul li{...} ul li a{...} But, the architecture lives here Thursday, June 24, 2010
  • 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 • Includes halfs, thirds, fourths, and fifths • No gutters • Infinite nesting and stacking Thursday, June 24, 2010
  • GRANULARITY FAIL + STALE RULES + UNPREDICTABILITY + DUPLICATION + SPECIFICITY WARS = MASSIVE CSS Thursday, June 24, 2010
  • 5 Text GRANULARITY FAIL the CSS objects shouldn’t match the PHP objects Thursday, June 24, 2010
  • 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 Thursday, June 24, 2010
  • 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 • 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
  • IT’S ALL ABOUT PATTERN MATCHING but you have to take a step back Thursday, June 24, 2010
  • PHP OBJECTS != CSS OBJECTS you will be tempted, beware! Thursday, June 24, 2010
  • 4 Text STALE RULES CSS gets crufty Thursday, June 24, 2010
  • 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
  • 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 - ‣ changes are more important than an absolute number Thursday, June 24, 2010
  • 3 Text UNPREDICTABILITY Make each object predictable and location independent Thursday, June 24, 2010
  • h3 Thursday, June 24, 2010
  • h3 Thursday, June 24, 2010
  • A Heading should not become a Heading in another part of the page. Thursday, June 24, 2010
  • 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
  • HOW DO YOU TEST FOR UNPREDICTABLE CODE? #foo h3{...} #bar h3{...} #baz h3{...} grep h[1-6] Thursday, June 24, 2010
  • 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 Facebook Thursday, June 24, 2010
  • HEADINGS AFTER: 25 Chad Little - Facebook Thursday, June 24, 2010
  • 2 Text SPECIFICITY WARS lobbing specificity grenades over the cube wall Thursday, June 24, 2010
  • SPECIFICITY SCREWS UP THE CASCADE and the cascade kind of rocks, so how do we use the good parts? Thursday, June 24, 2010
  • SIMPLIFY SPECIFICITY Thursday, June 24, 2010
  • .mod .hd{...} .ie .mod .hd{...} .weatherMod .hd {...} USE HACKS SPARINGLY And don’t let them change your specificity Thursday, June 24, 2010
  • .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
  • #navigation{...} #header{...} AVOID STYLING IDS IDs impact specificity and can’t be reused IDs are for JS Thursday, June 24, 2010
  • X #navigation{...} #header{...} AVOID STYLING IDS IDs impact specificity and can’t be reused IDs are for JS Thursday, June 24, 2010
  • .nav {color: red !important;} AVOID !IMPORTANT except on leaf nodes Thursday, June 24, 2010
  • .nav {color: red !important;} X AVOID !IMPORTANT except on leaf nodes Thursday, June 24, 2010
  • !IMPORTANT 518 declarations using important 12% have greater than 50 Thursday, June 24, 2010
  • div.error{...} STYLE CLASSES rather than elements Thursday, June 24, 2010
  • X div.error{...} STYLE CLASSES rather than elements .error{ most of the code goes here } Thursday, June 24, 2010
  • 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
  • html body .myModule div .hd{...} .myModule2 .hd {...} GIVE RULES THE SAME STRENGTH Use cascade order to overwrite previous rules Thursday, June 24, 2010
  • 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
  • 1 Text DUPLICATION CSS kudzu on steroids Thursday, June 24, 2010
  • 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% >100 Thursday, June 24, 2010
  • HOW DID FACEBOOK REDUCE DUPLICATION? let’s look at an example Thursday, June 24, 2010
  • 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 ❖ Must clearfix Thursday, June 24, 2010
  • WHAT DON’T WE KNOW? ❖ Image width and decoration vary ❖ Right content is unknown ❖ Width unknown Thursday, June 24, 2010
  • SEPARATE STRUCTURE FROM CHROME Thursday, June 24, 2010
  • 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
  • 4 LINES OF CSS... Thursday, June 24, 2010
  • Thursday, June 24, 2010
  • HTML SIZE reduced by 50% by Stefan Parker Thursday, June 24, 2010
  • “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
  • LET’S KEEP TALKING... www.stubbornella.org @stubbornella http://phpied.com @stoyanstefanov OOCSS Project: http://github.com/stubbornella/oocss/ Thursday, June 24, 2010