Object Oriented Css For High Performance Websites And Applications

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.


AND BAD
NEWS

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

REQUIRE EXPERT ABILITY
JUST TO GET STARTED.
this is not a sign of maturity.


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


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


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


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


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


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


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


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


CALCULATING
COMPLEXITY IN CSS
All solutions are not created equal


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


WHOA!


LET’S SORT THIS OUT.
In what ways have the solutions introduced complexity?


4x HTTP
REQUESTS
Four images where one is
enough


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

2x CSS CODE
because structure is
duplicated for both


EXTRA
WEIGHT
because sprites duplicate
iconography

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


EXTRA
WEIGHT
because sprites include text as
images

EXTRA CSS
because each button requires
its own CSS


3 METRICS

1. HTTP requests

2. Size of images

3. Size of the CSS


OBJECT-ORIENTED CSS
CAN HELP


CREATE A COMPONENT
LIBRARY
of reusable “legos”


SEPARATE CONTAINER
AND CONTENT


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

EXTEND OBJECTS: APPLY
MULTIPLE CLASSES


MEDIA
Extending objects, a simple
example.


<div class=quot;media mediaExtquot;>
<img class=quot;fixedMediaquot; src=quot;myImg.pngquot; />

<div class=quot;bodyquot;>

...

</div>
</div>

SEPARATE STRUCTURE
FROM SKIN
two separate classes


block
inner
hd

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


SKIN
Makes it pretty.

The goal is very predictable
skins, complexity is absorbed
by the structure object and
shared across the site.


/* ----- 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);
}


AVOID LOCATION
DEPENDENT STYLES
to keep CSS ﬁle size in check


Heading should not become a
A Heading

in another part of the page.


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

e.g. Heading should behave
predictably in any module.


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

+1 FOR MODULARITY,
BUT STILL BROKEN

DEMO

PHOTO CREDITS

• “South Carolina” by Army.Mil

• “So Happy Together” by kalandrakas

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


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/
•


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


Object Oriented Css For High Performance Websites And Applications

Recommended

Recommended

More Related Content

Similar to Object Oriented Css For High Performance Websites And Applications

Similar to Object Oriented Css For High Performance Websites And Applications (14)

More from PerconaPerformance

More from PerconaPerformance (17)

Recently uploaded

Recently uploaded (20)

Object Oriented Css For High Performance Websites And Applications