Your website has out-of-control CSS bloat. You know your performance is being impacted, but how do you move from organic CSS with no particular architecture to something lighter, more logical, and easier to maintain? In this session, Nicole Sullivan and Stoyan Stefanov will show you how they improved the CSS at Facebook and Yahoo! Search. After this session you will know how to:
1. Use lint tools to automate and evaluate the efficiency of your CSS
2. Avoid the top 5 causes of CSS bloat, and
3. Speed up your site by making the UI code an order of magnitude smaller.
7. 44% HAVE MORE THAN 2
CSS FILES
56%
44%
Friday, September 10, 2010
8. 56% SERVE CSS WITH
COOKIES
Friday, September 10, 2010
9. 62% DON’T MINIFY
would get more than 10% savings from YUI compressor
Friday, September 10, 2010
10. 21% HAVE >100K OF CSS
21%
11%
11%
44%
24%
Friday, September 10, 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
Friday, September 10, 2010
12. KUDZU
Was introduced to the United States between 1935 and 1950
by the Soil Conservation Service to prevent soil erosion.
Friday, September 10, 2010
14. “OBJECT ORIENTED CSS
SOUNDS GREAT, BUT WE
HAVE A GIANT MESS!”
how do we get from here to there?
Friday, September 10, 2010
15. FACEBOOK DECIDED TO
GO ON A DIET
The CSS was one piece of the puzzle
Friday, September 10, 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
Friday, September 10, 2010
17. THEY REDUCED THEIR
RESPONSE TIME BY HALF
in only six months
Friday, September 10, 2010
18. WHAT IS OBJECT
ORIENTED CSS?
A philosophy? A framework? A tool?
Friday, September 10, 2010
19. MORE LIKE AN EVOLUTION
OF THE LANGUAGE
it makes CSS more powerful
Friday, September 10, 2010
20. HOW IS IT DIFFERENT?
ul{...}
ul li{...}
ul li a{...}
Friday, September 10, 2010
21. HOW IS IT DIFFERENT?
ul{...}
ul li{...}
ul li a{...}
Until now, we focused all our effort here
Friday, September 10, 2010
22. HOW IS IT DIFFERENT?
ul{...}
ul li{...}
ul li a{...}
But, the architecture lives here
Friday, September 10, 2010
23. MUCH LESS CODE
easier to work with newbies
Friday, September 10, 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
Friday, September 10, 2010
25. GRANULARITY FAIL
+ STALE RULES
+ UNPREDICTABILITY
+ DUPLICATION
+ SPECIFICITY WARS
= MASSIVE CSS
Friday, September 10, 2010
26. 5 Text
GRANULARITY FAIL
the CSS objects shouldn’t match the PHP objects
Friday, September 10, 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.
Friday, September 10, 2010
41. IT’S ALL ABOUT PATTERN
MATCHING
but you have to take a step back
Friday, September 10, 2010
42. PHP OBJECTS != CSS OBJECTS
you will be tempted, beware!
Friday, September 10, 2010
43. 4 Text
STALE RULES
CSS gets crufty
Friday, September 10, 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
Friday, September 10, 2010
45. WHAT KIND DO YOU
HAVE?
Friday, September 10, 2010
46. WHAT KIND DO YOU
HAVE?
❖ Try dust-me selectors
Friday, September 10, 2010
47. WHAT KIND DO YOU
HAVE?
❖ Try dust-me selectors
❖ Track them over time -
‣ changes are more important than an absolute number
Friday, September 10, 2010
48. 3 Text
UNPREDICTABILITY
Make each object predictable and location independent
Friday, September 10, 2010
51. A Heading should not become a Heading
in another part of the page.
Friday, September 10, 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
Friday, September 10, 2010
53. HOW DO YOU TEST FOR
UNPREDICTABLE CODE?
#foo h3{...}
#bar h3{...}
#baz h3{...}
grep
h[1-6]
Friday, September 10, 2010
54. h1-h6
How many? You need site-wide headings
Friday, September 10, 2010
55. 511
declarations setting styles for h1-h6
56% >10
9% >100
Friday, September 10, 2010
56. HEADINGS BEFORE
958
declarations h1-h6
Facebook
Friday, September 10, 2010
57. HEADINGS AFTER:
25
Chad Little - Facebook
Friday, September 10, 2010
58. 2 Text
SPECIFICITY WARS
lobbing specificity grenades over the cube wall
Friday, September 10, 2010
59. SPECIFICITY SCREWS UP
THE CASCADE
and the cascade kind of rocks, so how do we use
the good parts?
Friday, September 10, 2010
61. .mod .hd{...}
.ie .mod .hd{...}
.weatherMod .hd {...}
USE HACKS SPARINGLY
And don’t let them change your specificity
Friday, September 10, 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{...}
Friday, September 10, 2010
63. #navigation{...}
#header{...}
AVOID STYLING IDS
IDs impact specificity and can’t be reused
IDs are for JS
Friday, September 10, 2010
64. X
#navigation{...}
#header{...}
AVOID STYLING IDS
IDs impact specificity and can’t be reused
IDs are for JS
Friday, September 10, 2010
65. .nav {color: red !important;}
AVOID !IMPORTANT
except on leaf nodes
Friday, September 10, 2010
66. .nav {color: red !important;} X
AVOID !IMPORTANT
except on leaf nodes
Friday, September 10, 2010
67. !IMPORTANT
518
declarations using important
12% have greater than 50
Friday, September 10, 2010
68. div.error{...}
STYLE CLASSES
rather than elements
Friday, September 10, 2010
69. X
div.error{...}
STYLE CLASSES
rather than elements
.error{ most of the code goes here }
Friday, September 10, 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{ }
Friday, September 10, 2010
71. html body .myModule div .hd{...}
.myModule2 .hd {...}
GIVE RULES THE
SAME STRENGTH
Use cascade order to overwrite previous rules
Friday, September 10, 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{...}
Friday, September 10, 2010
73. 1 Text
DUPLICATION
CSS kudzu on steroids
Friday, September 10, 2010
74. GREP IS YOUR FRIEND
look at the stylesheets globally rather than per page
Friday, September 10, 2010
75. margin too many? You need reset.css
Friday, September 10, 2010
76. 518
declarations reset margin to zero
64% > 10
14% > 100
Friday, September 10, 2010
77. float
too many? You need grids
Friday, September 10, 2010
78. 733
declarations floated elements
56% > 10
13% > 100
Friday, September 10, 2010
79. font-size headings may be disguised in class names
Friday, September 10, 2010
80. FONT-SIZE
889
declarations changed the font-size
78% >10
23% >100
Friday, September 10, 2010
81. HOW DID FACEBOOK
REDUCE DUPLICATION?
let’s look at an example
Friday, September 10, 2010
90. HTML SIZE
reduced by 50%
by Stefan Parker
Friday, September 10, 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
Friday, September 10, 2010