CSS Bloat!

CSS BLOAT!
with Nicole Sullivan

Friday, September 10, 2010

TWEET!

@stubbornella


WHY OPTIMIZE CSS?

• It blocks progressive rendering

test: http://www.phpied.com/ﬁles/css-loading/table.php
• It’s verbose (property value pairs cannot be miniﬁed like JS)

text-decoration: underline
!= td: u


TOP 1000 STUDY

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


<?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) {}

}

?>

42% DON’T GZIP CSS


44% HAVE MORE THAN 2
CSS FILES
56%

44%


56% SERVE CSS WITH
COOKIES


62% DON’T MINIFY

would get more than 10% savings from YUI compressor

21% HAVE >100K OF CSS
21%

11%
11%

44%

24%

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

KUDZU
Was introduced to the United States between 1935 and 1950
by the Soil Conservation Service to prevent soil erosion.


CSS KUDZU!


“OBJECT ORIENTED CSS
SOUNDS GREAT, BUT WE
HAVE A GIANT MESS!”
how do we get from here to there?


FACEBOOK DECIDED TO
GO ON A DIET
The CSS was one piece of the puzzle


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

THEY REDUCED THEIR
RESPONSE TIME BY HALF
in only six months


WHAT IS OBJECT
ORIENTED CSS?
A philosophy? A framework? A tool?


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


HOW IS IT DIFFERENT?

ul{...}
ul li{...}
ul li a{...}



ul{...}
ul li{...}
ul li a{...}

Until now, we focused all our effort here



ul{...}
ul li{...}
ul li a{...}

But, the architecture lives here


MUCH LESS CODE
easier to work with newbies


GRIDS
• 574 bytes

• 14 lines of code

• Percentage widths adapt to
different page sizes

• Includes halfs, thirds, fourths, and
ﬁfths

• No gutters

• Inﬁnite nesting and stacking


GRANULARITY FAIL
+ STALE RULES
+ UNPREDICTABILITY
+ DUPLICATION
+ SPECIFICITY WARS
= MASSIVE CSS

5 Text

GRANULARITY FAIL
the CSS objects shouldn’t match the PHP objects


http://www.brickartist.com/

WE WANT TO DO THE
SAME THING WITH CSS


CREATE THE
BUILDING BLOCKS


MOST SITES GET THE
GRANULARITY WRONG
and their architecture is set up to fail


HOW? FIRST, A VISUAL
INVENTORY


TAKE A PHP OBJECT

BREAK IT DOWN

7 SMALLER OBJECTS


headings


HEADINGS
Heading - 16px bold #3B5998
Heading - 16px normal #333333
Heading - 15px bold #3B5998 • 12px headings eliminated
Heading - 14px bold #3B5998 • Blue only for links
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.

IT’S ALL ABOUT PATTERN
MATCHING
but you have to take a step back


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


4 Text

STALE RULES
CSS gets crufty


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


WHAT KIND DO YOU
HAVE?


WHAT KIND DO YOU
HAVE?

❖ Try dust-me selectors


WHAT KIND DO YOU
HAVE?

❖ Try dust-me selectors
❖ Track them over time -
‣ changes are more important than an absolute number


3 Text

UNPREDICTABILITY
Make each object predictable and location independent


h3


A Heading should not become a Heading

in another part of the page.


AVOID
EXAMPLE
#weatherModule h3{color:red;}
#tabs h3{color:blue}

❖ Global color undeﬁned for h3, so it will be
‣ unstyled in new modules,
‣ developers forced to write more CSS for the same style


HOW DO YOU TEST FOR
UNPREDICTABLE CODE?
#foo h3{...}
#bar h3{...}
#baz h3{...}

grep
h[1-6]


h1-h6
How many? You need site-wide headings


511
declarations setting styles for h1-h6

56% >10
9% >100

HEADINGS BEFORE

958
declarations h1-h6

Facebook

HEADINGS AFTER:

25
Chad Little - Facebook

2 Text

SPECIFICITY WARS
lobbing speciﬁcity grenades over the cube wall


SPECIFICITY SCREWS UP
THE CASCADE
and the cascade kind of rocks, so how do we use
the good parts?


SIMPLIFY SPECIFICITY


.mod .hd{...}
.ie .mod .hd{...}
.weatherMod .hd {...}

USE HACKS SPARINGLY
And don’t let them change your speciﬁcity


.mod .hd{...}
X
.ie .mod .hd{...}
.weatherMod .hd {...}

USE HACKS SPARINGLY
And don’t let them change your speciﬁcity

.mod .hd{color: red; _zoom:1;}
.weatherMod .hd{...}


#navigation{...}
#header{...}

AVOID STYLING IDS
IDs impact speciﬁcity and can’t be reused

IDs are for JS

X
#navigation{...}
#header{...}

AVOID STYLING IDS
IDs impact speciﬁcity and can’t be reused

IDs are for JS

.nav {color: red !important;}

AVOID !IMPORTANT
except on leaf nodes


.nav {color: red !important;} X

AVOID !IMPORTANT
except on leaf nodes


!IMPORTANT

518
declarations using important

12% have greater than 50

div.error{...}

STYLE CLASSES
rather than elements


X
div.error{...}

STYLE CLASSES

.error{ most of the code goes here }


X
div.error{...}

STYLE CLASSES

.error{ most of the code goes here }
div.error{ }
p.error{ exceptions only }
em.error{ }

html body .myModule div .hd{...}
.myModule2 .hd {...}

GIVE RULES THE
SAME STRENGTH
Use cascade order to overwrite previous rules


X
html body .myModule div .hd{...}
.myModule2 .hd {...}

GIVE RULES THE
SAME STRENGTH
Use cascade order to overwrite previous rules

.myModule .hd{...}
.myModule2 .hd{...}


1 Text

DUPLICATION
CSS kudzu on steroids


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


margin too many? You need reset.css


518
declarations reset margin to zero

64% > 10
14% > 100

ﬂoat
too many? You need grids


733
declarations ﬂoated elements

56% > 10
13% > 100

font-size headings may be disguised in class names


FONT-SIZE

889
declarations changed the font-size

78% >10
23% >100

HOW DID FACEBOOK
REDUCE DUPLICATION?
let’s look at an example


MEDIA BLOCK EXAMPLE


ALL OF THESE ARE THE
SAME OBJECT


WHAT DO WE KNOW?

❖ Can be nested
❖ Optional right button

❖ Must clearﬁx


WHAT DON’T WE KNOW?

❖ Image width and decoration vary
❖ Right content is unknown

❖ Width unknown


SEPARATE STRUCTURE
FROM CHROME


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>


4 LINES OF CSS...

_


HTML SIZE
reduced by 50%

by Stefan Parker

“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

LET’S KEEP TALKING...
www.stubbornella.org
@stubbornella

OOCSS Project: http://github.com/stubbornella/oocss/


CSS Bloat!

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to CSS Bloat!

Similar to CSS Bloat! (20)

More from Nicole Sullivan

More from Nicole Sullivan (15)

CSS Bloat!