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

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

HOW IS IT DIFFERENT?
ul{...}
ul li{...}
ul li a{...}

HOW IS IT DIFFERENT?
ul{...}
ul li{...}
ul li a{...}
Until now, we focused all our effort here

HOW IS IT DIFFERENT?
ul{...}
ul li{...}
ul li a{...}
But, the architecture lives here

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

“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

CSS CIRCA 2005
total spaghetti

CSS CIRCA 2008
a little better

RATHER THAN MAKING
OUR CODE PLAY NICE
We built big fences

BUT FOR PERFORMANCE?

SITES GET SLOW
As file size and HTTP requests are not optimized

CSS CIRCA 2009

OBJECT ORIENTED CSS
best practices for performance,
scalability, and most importantly,
easy to use.

1. Create objects rather than pages or modules
2. Set good global defaults on content objects
3. Abstract reusable elements
4. Separate structure and skin (into two classes)
5. Separate container and content (open editable
zones)
6. Tame the cascade
7. Use multiple classes to simulate OO

CREATE OBJECTS
rather than pages or modules

SET GOOD GLOBAL
DEFAULTS?
for standard content objects

ABSTRACT REUSABLE
ELEMENTS?
to allow maximum scalability, and less code

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

TAME THE CASCADE
Apply classes to the object we wish to extend, rather than
random parent nodes. Predictability!

TAMING THE CASCADE
❖ Within any one object use the cascade fully
❖ All sub-nodes of an object should be prefaced with the object
class name. For example: .mymodule .inner{...}
❖ Avoid the cascade as much as possible between objects

SEPARATE CONTAINER
AND CONTENT
define the boundaries of each object

Media
Subheading
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
image
or flash OPEN EDITABLE ZONE

image
or flash OPEN EDITABLE ZONE

USE MULTIPLE CLASSES?
to simulate inheritance

Media
Subheading
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Media Extended
Subheading
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
MEDIA
Extending objects, a simple
example.

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

SEPARATE STRUCTURE
FROM SKIN
two separate classes

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

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

mod complex
mod complex

mod pop

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

WHAT BELONGS IN THE
SKIN?
Every value in the skin should be predictable, something that
can easily be calculated or measured.
Colors
Borders
Images

WHAT NOT TO DO!
inappropriate dependence on the cascade is not object
oriented.

LOCATION DEPENDENT
STYLES
avoid!

FUNCTION AREA()

FUNCTION AREA()

FUNCTION AREA()

EVERY NOW AND THEN...

RETURNED DIAMETER

BROKEN.

IN CSS WE DO THIS
ALL THE TIME

BROKEN.

A Heading should not become a Heading
in another part of the page.

AVOID
CODE 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

AVOID
CODE EXAMPLE
h3{color:black;}
#weatherModule h3{color:red;}
#tabs h3{color:blue}
❖ Global color defined (better!)
❖ Weather and tabs override default h3
‣ three styles for h3 cannot co-exist in the same module
‣ default style cannot be used in weather and tabs without costly
overrides
❖ Weather and tabs h3 can never be used outside of those
modules

CONSISTENCY
Writing more rules to
overwrite the crazy rules from
before.
e.g. Heading should behave
predictably in any module.

TRY THIS INSTEAD
h1, .h1{...}
h2, .h2{...}
h3, .h3{...}
h4, .h4{...}
h5, .h5{...}
h6, .h6{...}
❖ Global values defined
❖ Semantics respected (while allowing visual flexibility)

NEED MORE THAN 6
HEADINGS?
Really? Any duplicates? Any too similar?

STILL NEED MORE
HEADINGS?
.category{...}
.section{...}
.product{...}
.prediction{...}
❖ Extend the heading object via a class on the object itself
❖ Avoid using the cascade to place classes on parent objects

CALCULATING
COMPLEXITY IN CSS
All solutions are not created equal

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

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

3 METRICS
1. HTTP requests
2. Size of images
3. Size of the CSS

OUTCOMES
If the theory is right, it should yield better results.

TEMPLATE
• 807 bytes
• 13 lines of code
• easily
extended to custom
page and column width

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

MODULE
• 1.3K (structure)
• 22 lines of code
• Width and height agnostic
• Three structures
• 264 different combos of
skins

JS COMMUNITY
How to remain JS lib agnostic?
DHTML objects?
Easily adding behaviors?
Trigger parameters?

FLICKR PHOTO CREDITS
❖ “spaghetti con salsa de tomate y carne + albahaca” by pablovenegas
❖ “Jenga” by j3ku (3 photos, same title)
❖ “Sandbox Fun” by engelsrud
❖ “Golden Gate from Alcatraz” by Tolka Rover
❖ “Treasure Island / The Island / L'île Perdu / La Isla Maravillosa - Version II” by Aaron Escobar
❖ “Razor Wire (01)” by Amy
❖ “At the landfill” by digitalsadhu
❖ “Happy Day” by Daniel Gebhart
❖ “Finding Time to Laugh” by Leepack
❖ “Very Happy Baby” by Yogi

LET’S KEEP TALKING
❖ “Stubbornella” on the web. Twitter, doppler, everywhere...
❖ http://stubbornella.org
❖ nicole@stubbornella.org