Object Oriented CSS

OBJECT ORIENTED CSS
for high performance web applications and sites.

Nicole Sullivan
Monday, February 16, 2009

Web Dev Philosophy

• Work out of respect for the design.
• Designers make our code as beautiful and
clever on the outside as it is on the inside.
• Respect the original design vision.
consistent design = clean code = fast site.


“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


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.


BUT, WE WANT A LOT!
and sometimes those goals conﬂict.


and sometimes those goals conﬂict.


Modular - combinable ,
reusable, extensible. Light -
One to many relationship
between CSS and potential
layouts. Fast - Minimal HTTP
requests & minimal size.
Future-proof - maintainable,
semantic, standards oriented,
prepared for future-browsers,
redesign compatible. Visually
interesting and adaptable -
respectful of UED and
mar keting constraints.
Simpliﬁes and speeds CSS
development. Accessible -
SEO, Screen readers, etc.

SOLUTION
Object Oriented CSS


TWO MAIN PRINCIPLES
1. Separate Structure and Skin
2. Separate Container and Content


10 BEST PRACTICES
1. Create a component 6. Minimize selectors
library
7. Separate structure and skin
2. Use consistent semantic
styles 8. Separate container and
content
3. Design modules to be
transparent on the inside. 9. Extend objects by applying
multiple classes to an
4. Be ﬂexible. element

5. Learn to love grids. 10. Use reset and fonts from
YUI


9 PITFALLS
1. Location dependent styles. 5. Don’t sprite every image
together (unless your has
very few pages).
2. Avoid specifying what tag
a class applies.
6. Avoid height alignment
3. Avoid IDs to style inside
the main content areas. 7. Text as text, not as images.

4. Avoid drop shadows and 8. Redundancy
rounded corners over
irregular backgrounds. 9. Avoid premature
optimization.


CREATE A COMPONENT
LIBRARY
of reusable “legos”


Components
are like legos
Mix and match to create diverse
and interesting pages.


SEPARATE
CONTAINER AND
CONTENT
break the dependency between the container module
and the content objects it contains.


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

Build HTML from the
component library.
New pages should not generally require additional CSS


SITE-WIDE LEGOS
• Headings

• Lists (e.g. action list, external link list, product list, or
feature list)

• Module headers and footers

• Grids

• Buttons


Heading Level 1
Heading Level 2
HEADINGS Heading Level 3
Getting the look and feel you
want with the semantics you Heading Level 4
need.
Heading Level 5

Heading Level 6


‣ Toggle List
Default List
‣ List Item 2
List Item 2
‣ List Item 3
List Item 3

LISTS ❖ Action List
❖ List Item 2
Should be available to all ❖ List Item 3
modules on the page.


MEDIA
Extending objects, a simple
example.


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

<div class=quot;textquot;>

...

</div>
</div>

SEPARATE
STRUCTURE AND
SKIN
abstract the structure of the block from the skin which
is being applied.


block
inner
hd

BLOCK
bd
class can be extended by
adding additional classes to
the block element. ft


Reusing elements
makes them
performance “freebies”


Legos ﬁrst
Design individual pages only once all the legos have
been deﬁned.


Pitfalls
What not to do.


Avoid redundancy

Nearly identical
modules
Headings 3 and 5 are too similar.


Rule of thumb:
If two modules look too similar to include on
the same page, they are too similar to include
together in a site, choose one!


USE CONSISTENT
SEMANTIC STYLES


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.


How about an
example?
Yahoo! Personal Finance


2+ different tab
styles. Could they
use the same
images?


3 contour
components are
too similar. Chose
one.


Changes in module
width, background
color, or background
image are an excellent
example of module
reuse.

Mix and match
Container and content objects to achieve high
performance design.


DESIGN MODULES TO
BE TRANSPARENT
on the inside.


Making it look
fab
Requires careful choice of pixels.

Bonus: Consider PNG8 for
progressive enhancement

http://alistapart.com/articles/mountaintop/

Pitfalls
Variable or gradient
backgrounds.


NEVER SPECIFY
ELEMENT
Do: .myClass {...}

Don’t: div.myClass {...}

Exception: Extending a Extend the error class to
class to work on several apply to strong or div
elements. elements specify the
speciﬁc tag in the rule that
e.g..error{} which, by declares only the values
that are different than the
default, applies to a P.
default value.


BE FLEXIBLE.
Extensible height and width.


• Grids control width
• Content controls height


LEARN TO LOVE
GRIDS.


MARK-UP AND CSS
become predictable


UML TO DESCRIBE
both HTML and CSS


TEACHING OO CSS
To designers and engineers


A NATURAL PROGRESSION
from simple to more complex tasks.


CSS WISH LIST
So, maybe CSS isn’t perfect.


CSS WISH LIST

1. Extending objects - possible to make “sale module” inherit
from “module”.
.module{}
.saleModule{extends: module;}


CSS WISH LIST

2. Or, class-order should impact the cascade.
<div class=“module saleMod ducati”> ... </div>


CSS WISH LIST

saleMod
Ducati Superbike 848

3. Proximity should
The 848 is Ducati's most impressive
middleweight Superbike ever. Its exceptional
lightweight and legendary Ducati chassis set-up

impact the cascade. combined with the smooth and thrilling torque
delivery of the L-Twin Desmo provide the ideal
way to enter the world of Ducati Superbikes.

Nested modules, ﬁrst
one last in the CSS. Ducati Superbike 848
middleweight Superbike ever. Its exceptional
lightweight and legendary Ducati chassis set-up
combined with the smooth and thrilling torque
delivery of the L-Twin Desmo.
.protectiveGear{...}
.saleMod{...}
Arai RX7 Corsair Full Face Helmet - Haga Fire
and Ice
middleweight Superbike ever.

protectiveGear

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
nicole@stubbornella.org
“stubbornella” on the web...
twitter, dopplr, slideshare, everywhere...


Object Oriented CSS

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (6)

Ähnlich wie Object Oriented CSS

Ähnlich wie Object Oriented CSS (20)

Mehr von Nicole Sullivan

Mehr von Nicole Sullivan (12)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Object Oriented CSS

Hinweis der Redaktion