An introduction to Object Oriented CSS

Kelley Walker, Dominion Enterprises

Object Oriented CSS
a distillation of Nicole Sullivan’s approach
to building large, scalable, high traffic
sites and applications

OOCSS the Sullivan Way
Who is Nicole Sullivan?
www.stubbornella.org
Yahoo: scalability and focus on page speed
Full Six: a French firm experiencing a severe
shortage of senior level UI developers, but plenty of
graphic designers

Definitions
Modular: combinable, reusable, extensible
Light: one to many relationship between CSS and potential
layouts
Fast: Minimal HTTP requests and minimal size
Future-proof: maintainable, semantic, standards-oriented,
easy to redesign, prepared for future browsers
Adaptable: respectful of UX design and marketing restraints
Accessible: SEO, screen readers, variety of user agents,
users with disabilities (especially as the population ages),
and assistive technologies

Lego Land
Object oriented

1. Immature
2. Fragile
3. Re-use is Rare
What’s Wrong with CSS?

Sullivan’s Complaints
1) Coders are writing modules that are too
clever.
2) Can’t pull a module and use it elsewhere
because code is dependent on that location.

Questions
1. Is the code really too clever?
2. Is it possibly because she’s speaking from a
position of working with large organizations -- which
don’t typically allow time to write re-usable code?
3. In smaller agencies, might code re-use be more
likely because building entire sites with more
frequency?
4. OTOH, maybe agency environments might also
encourage tendency to try out new tricks – which
could mean you are not re-purposing when
possible?

CSS Doesn’t Suck
(We’re just doing it wrong)
 The way to do it right is to use Object
Oriented approaches to building modules,
pages, and entire Web sites.

What is Object Oriented CSS?
What does the “object” in
object-oriented mean?
An object exemplifies – is an exemplar of – a class.
A dog with a hat |= object

•Dog with a hat
•Dog with a bone
•Man with a bone

Each of those images constitutes a module,
not an object. The objects are the man and the
bone.
Do we mean this? Or this?
What about a man eating fish?

OOCCS: Two Characteristics
1). Separation of structure and skin
Create basic layouts – like wireframes – then
skin the layout.
2). Separation of container and content
Create module containers, then fill with
content objects: Header, footer, titles,
paragraphs, images, captions, etc.

Used to focus here:
ul{…}
ul li{…}
ul li a{…}
But, the architecture lives here:
ul{…}
ul li{…}
ul li a{…}

Objects are Lego-like components that can
be mixed and matched to build modules,
pages, Web sites.

This is a module
HEADING
Title Goes Here
Description text goes here. It has
the form of a paragraph and,
semantically, it is a paragraph.
This is an
Unordered list
Containing examples
These are objects

OOCSS Top Ten
1. Create Component
Library
2. Consistent
semantic styles
3. Design modules to
be transparent on
the inside
4. Be flexible
5. Use grids
6. Minimize selectors
7. Separate structure
and skin
8. Separate container
and content
9. Use reset and font
consistency style
sheets (@YUI)
10.Extend objects with
multiple classes

Do’s
 Do develop pages after all individual structural
elements have been identified
 Do build structural legos first
 Do use grids: grids control width; content
controls height
 Do abstract reusable elements
 Do style for exceptions
 Do set objects - not pages or modules
 Do set global defaults on content objects

Do’s
This is the norm:
.error{ most of the code goes here }
These are exceptions:
div.error{…;}
p.error{…;}
span.error{…;}

Don’ts
Depending on the cascade is not Object Oriented CSS:
h3{color:black;}
.weathermodule h3 {color:red;}
.nav_tabs h3{color:blue;}
Instead, she argues for a global definition of
heading tags:
h1, .h1{…}, h2, .h2{…}, h3, .h3{…}, h4, .h4{…},
h5, .h5{…}, h6, .h6{…}

Don’ts
 Don’t specify elements (only if it’s an exception)
div.myclass{…}
instead, use:
.myclass{…}
 Don’t use IDs - reserve for use as javascript
hooks

Don’ts
Don’t use height alignment in the design
Bowralite marica
Mahewu's nondecisiveness bisetous sexly nonurgently gutteral
tingidae politei amphioxidae fibromyomectomy admiredly.
Uninsolated topepo balbusard aristocraticism falcular gmelinites.
Centrodorsally boghole armadilla subarborescence prederived
distater deliquiate.
Semicardinal subslots legative plasmode
langsettle tummer preboyhood's, outma
laprop hydroguret runagado, reexpression
abatage's disomatic. Heteroside harten
braggadocian cattlefold indiadem pathetic
is todo ally porcelanic xanthophyl.
Semicardinal subslots legative plasmo
laprop hydroguret runagado, reexpress

Semicardinal subslots legative plasmode
laprop hydroguret runagado, reexpression
Because… when your content is dynamic….
Bowralite marica
Mahewu's nondecisiveness bisetous sexly nonurgently gutteral
tingidae politei amphioxidae fibromyomectomy admiredly.
Uninsolated topepo balbusard aristocraticism falcular gmelinites.
Centrodorsally boghole armadilla subarborescence prederived
distater deliquiate.
Semicardinal subslots legative plasmo
laprop hydroguret runagado, reexpress

Communicating Object
Oriented CSS:

An introduction to Object Oriented CSS

Recomendados

Recomendados

Más contenido relacionado

Similar a An introduction to Object Oriented CSS

Similar a An introduction to Object Oriented CSS (20)

Más de Kelley Howell

Más de Kelley Howell (20)

Último

Último (20)

An introduction to Object Oriented CSS

Notas del editor