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 • Respect the original design vision.
consistent design = clean code = fast site.

clever on the outside as it is on the inside.

Monday, February 16, 2009

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

Monday, February 16, 2009

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

Monday, February 16, 2009

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

CSS

Monday, February 16, 2009

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

Monday, February 16, 2009

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

Monday, February 16, 2009

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

Monday, February 16, 2009

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

Monday, February 16, 2009

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

Monday, February 16, 2009

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

Monday, February 16, 2009

BUT, WE WANT A LOT!
and sometimes those goals conflict.

Monday, February 16, 2009

and sometimes those goals conflict.

Monday, February 16, 2009

Monday, February 16, 2009

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. Simplifies and speeds CSS development. Accessible SEO, Screen readers, etc.
Monday, February 16, 2009

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. Simplifies and speeds CSS development. Accessible SEO, Screen readers, etc.
Monday, February 16, 2009

SOLUTION
Object Oriented CSS

Monday, February 16, 2009

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

Monday, February 16, 2009

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

Monday, February 16, 2009

9 PITFALLS
1. Location dependent styles. 2. Avoid specifying what tag a class applies. 3. Avoid IDs to style inside the main content areas. 4. Avoid drop shadows and rounded corners over irregular backgrounds. 5. Don’t sprite every image together (unless your has very few pages). 6. Avoid height alignment 7. Text as text, not as images. 8. Redundancy 9. Avoid premature optimization.

Monday, February 16, 2009

CREATE A COMPONENT LIBRARY
of reusable “legos”

Monday, February 16, 2009

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

Monday, February 16, 2009

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

Monday, February 16, 2009

Monday, February 16, 2009

Contour blocks

Background blocks

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...

Content Objects -

X

X

1:n
Monday, February 16, 2009

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

Monday, February 16, 2009

SITE-WIDE LEGOS
• Headings • Lists

(e.g. action list, external link list, product list, or feature list) headers and footers

• Module • Grids • Buttons

Monday, February 16, 2009

Heading Level 1

HEADINGS
Getting the look and feel you want with the semantics you need.

Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5 Heading Level 6

Monday, February 16, 2009

Default List List Item 2 List Item 3

‣ ‣ ‣

Toggle List List Item 2 List Item 3

LISTS
Should be available to all modules on the page.

❖ Action List ❖ List Item 2 ❖ List Item 3

Monday, February 16, 2009

MEDIA
Extending objects, a simple example.

Monday, February 16, 2009

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

Monday, February 16, 2009

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

Monday, February 16, 2009

block inner hd

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

Monday, February 16, 2009

Reusing elements makes them
performance “freebies”

Monday, February 16, 2009

Legos first
Design individual pages only once all the legos have been defined.

Monday, February 16, 2009

Pitfalls
What not to do.

Monday, February 16, 2009

Avoid redundancy
Monday, February 16, 2009

Nearly identical modules
Headings 3 and 5 are too similar.

Monday, February 16, 2009

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!

Monday, February 16, 2009

USE CONSISTENT SEMANTIC STYLES

Monday, February 16, 2009

A

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

Heading

Monday, February 16, 2009

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

Monday, February 16, 2009

How about an example?
Yahoo! Personal Finance

Monday, February 16, 2009

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

Monday, February 16, 2009

3 contour components are too similar. Chose one.

Monday, February 16, 2009

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

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

Monday, February 16, 2009

DESIGN MODULES TO BE TRANSPARENT
on the inside.

Monday, February 16, 2009

Making it look fab
Requires careful choice of pixels. Bonus: Consider PNG8 for progressive enhancement

http://alistapart.com/articles/mountaintop/
Monday, February 16, 2009

Pitfalls
Variable or gradient backgrounds.

Monday, February 16, 2009

NEVER SPECIFY ELEMENT
Do: Don’t:
.myClass {...} div.myClass {...}

Exception: Extending a class to work on several elements. e.g..error{} which, by default, applies to a P.

Extend the error class to apply to strong or div elements specify the specific tag in the rule that declares only the values that are different than the default value.

Monday, February 16, 2009

BE FLEXIBLE.
Extensible height and width.

Monday, February 16, 2009

• Grids control width • Content controls height

Monday, February 16, 2009

LEARN TO LOVE GRIDS.

Monday, February 16, 2009

MARK-UP AND CSS
become predictable

Monday, February 16, 2009

UML TO DESCRIBE
both HTML and CSS

Monday, February 16, 2009

TEACHING OO CSS
To designers and engineers

Monday, February 16, 2009

A NATURAL PROGRESSION
from simple to more complex tasks.

Monday, February 16, 2009

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

Monday, February 16, 2009

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

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

Monday, February 16, 2009

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

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

Monday, February 16, 2009

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

saleMod
3. Proximity should impact the cascade. Nested modules, first one last in the CSS.
.protectiveGear{...} .saleMod{...}
Ducati Superbike 848 The 848 is Ducati's most impressive 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 provide the ideal way to enter the world of Ducati Superbikes.

Ducati Superbike 848 The 848 is Ducati's most impressive 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
Monday, February 16, 2009

Arai RX7 Corsair Full Face Helmet - Haga Fire and Ice The 848 is Ducati's most impressive middleweight Superbike ever.

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/

• • • • • •

Monday, February 16, 2009

Let’s keep talking...
http://stubbornella.org nicole@stubbornella.org “stubbornella” on the web... twitter, dopplr, slideshare, everywhere...

Monday, February 16, 2009

Sign up to vote on this title
UsefulNot useful