OBJECT-ORIENTED CSS

for High Performance Websites and Applications

Nicole Sullivan
Wednesday, April 29, 2009
 GOOD NEWS
CSS and front-end architecture have a huge impact on
performance.

Wednesday, April 29, 2009

 AND BAD
NEWS

If I don’t do my job right, I can slow your site down to a crawl

Wednesday, April 29, 2009
 REQUIRE EXPERT ABILITY
JUST TO GET STARTED.
this is not a sign of maturity.

Wednesday, April 29, 2009

 FILE SIZE JUST KEEPS
GETTING BIGGER
As the site evolves we continuously modify the CSS.

Wednesday, April 29, 2009

 CODE RE-USE IS ALMOST
NONEXISTENT
people don’t trust other developers code.

Wednesday, April 29, 2009

 CODE IS TOO FRAGILE.
Even the cleanest code gets ruined by the first non-expert to
touch it.

Wednesday, April 29, 2009

 WHAT IS THE MOST
IMPORTANT MISTAKE
TALENTED CODERS ARE
MAKING?
Writing really clever modules.

Wednesday, April 29, 2009

 THE SIZE OF THEIR CSS
WILL INCREASE
in a 1:1 relationship with the number of blocks, pages, and
complexity of content.

Wednesday, April 29, 2009

 “JAVASCRIPT DOESN’T SUCK
You’re just doing it wrong.” -- Doug Crockford

Wednesday, April 29, 2009

 “JAVASCRIPT DOESN’T SUCK
You’re just doing it wrong.” -- Doug Crockford

Wednesday, April 29, 2009

 CSS
“JAVASCRIPT DOESN’T SUCK
You’re just doing it wrong.” -- Doug Crockford

Wednesday, April 29, 2009

 O(n)
Natural to you, but not to designers.

Wednesday, April 29, 2009

 CALCULATING
COMPLEXITY IN CSS
All solutions are not created equal

Wednesday, April 29, 2009

 FRONT END ARCHITECTURE
NEEDS TO BE RIGHT
Even best practices, like CSS sprites, can have unintended
consequences.

Wednesday, April 29, 2009

 WHOA!

Wednesday, April 29, 2009

Wednesday, April 29, 2009
Wednesday, April 29, 2009
 LET’S SORT THIS OUT.
In what ways have the solutions introduced complexity?

Wednesday, April 29, 2009

 4x HTTP
REQUESTS
Four images where one is
enough

Wednesday, April 29, 2009

 4x HTTP
REQUESTS
Four images where one is
enough

Wednesday, April 29, 2009

 1x HTTP
REQUEST
because background color is
tied to border color

2x CSS CODE
because structure is
duplicated for both

Wednesday, April 29, 2009

 1x HTTP
REQUEST
because background color is
tied to border color

2x CSS CODE
because structure is
duplicated for both

Wednesday, April 29, 2009

 EXTRA
WEIGHT
because sprites duplicate
iconography

2x CSS CODE
because the two cannot share
the same CSS

Wednesday, April 29, 2009

 EXTRA
WEIGHT
because sprites duplicate
iconography

2x CSS CODE
because the two cannot share
the same CSS

Wednesday, April 29, 2009

 EXTRA
WEIGHT
because sprites include text as
images

EXTRA CSS
because each button requires
its own CSS

Wednesday, April 29, 2009

 EXTRA
WEIGHT
because sprites include text as
images

EXTRA CSS
because each button requires
its own CSS

Wednesday, April 29, 2009

 3 METRICS

1. HTTP requests

2. Size of images

3. Size of the CSS

Wednesday, April 29, 2009

 OBJECT-ORIENTED CSS
CAN HELP

Wednesday, April 29, 2009

 CREATE A COMPONENT
LIBRARY
of reusable “legos”

Wednesday, April 29, 2009

 SEPARATE CONTAINER
AND CONTENT

Wednesday, April 29, 2009

 Contour blocks Background blocks Content Objects -
headings, paragraphs, lists, headers,
footers, buttons, etc.

Capital of the Canterbury region and the largest city

on the South Island (population just over 300,000)
exudes a palpable air of gentility and a connectedness
with the mother country.
Read more...

X X

1:n
Wednesday, April 29, 2009
 EXTEND OBJECTS: APPLY
MULTIPLE CLASSES

Wednesday, April 29, 2009

 MEDIA
Extending objects, a simple
example.

Wednesday, April 29, 2009

<!-- media -->
<div class="media mediaExt">
<img class="fixedMedia" src="myImg.png" />
<div class="body">
...
</div>
</div>

Wednesday, April 29, 2009

 SEPARATE STRUCTURE
FROM SKIN
two separate classes

Wednesday, April 29, 2009

 block
inner
hd

STRUCTURE
Solves browser bugs, positions bd
presentational elems, and
generally does the heavy lifting
of CSS.
ft

Wednesday, April 29, 2009

 SKIN
Makes it pretty.

The goal is very predictable

skins, complexity is absorbed
by the structure object and
shared across the site.

Wednesday, April 29, 2009

 /* ----- simple (extends mod) ----- */
.simple .inner {
border:1px solid gray;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}
.simple b{
*background-image:url(skin/mod/corners.png);
}

Wednesday, April 29, 2009

 AVOID LOCATION
DEPENDENT STYLES
to keep CSS file size in check

Wednesday, April 29, 2009

 A Heading should not become a Heading

in another part of the page.

Wednesday, April 29, 2009

 CONSISTENCY
Writing more rules to
overwrite the crazy rules from
before.

e.g. Heading should behave

predictably in any module.

Wednesday, April 29, 2009

 #weatherModule h2{...}
#weatherModule h3{...}
#weatherModule p{...}
#tabs h2{...}
#tabs h3{...}
#tabs p{...}

+1 FOR MODULARITY,
BUT STILL BROKEN
Wednesday, April 29, 2009
 DEMO
Wednesday, April 29, 2009
 PHOTO CREDITS

• “South Carolina” by Army.Mil

• “So Happy Together” by kalandrakas

• “sometimes, a hug is all what we need” by kalandrakas

Wednesday, April 29, 2009

 PHOTO CREDITS
• “You Crack Me Up” by http://flickr.com/photos/nickwheeleroz/2474196275/in/photostream/

• “red lego” by http://flickr.com/photos/niznoz/5753993/

• “Pablo’s cubism period began at three” by http://flickr.com/photos/wwworks/2475349116/in/

set-72157608035966422/

• “Kuwait water tower” by http://flickr.com/photos/asam/327911794/

• idigit_teddy: http://www.flickr.com/photos/design_inspiration/238542495/

• lucianvenutian: http://www.flickr.com/photos/lucianvenutian/1142630637/

• Gimli_36: http://www.flickr.com/photos/navillot/1878124531/

• NathanFromDeVryEET: http://www.flickr.com/photos/thatguyfromcchs08/2300190277/

• Stabilo Boss: http://flickr.com/photos/stabilo-boss/101793494/in/set-72057594060779001/

Wednesday, April 29, 2009

 LET’S KEEP TALKING...
http://stubbornella.org
http://github.com/stubbornella/oocss/
nicole@stubbornella.org
“stubbornella” on the web...
twitter, dopplr, slideshare, everywhere...

Wednesday, April 29, 2009