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