oocss in the real world: a case study from the cbc with jamie strachan

OOCSS IN THE REAL WORLDA Case Study from the CBC

CBC.CA

• 9.1 million pages in Google• 4.5 million visits per month• 200 stories a day• 24 UI developers

CBC.CA

9.1 million pages in Google4.5 million visits per month200 stories a day24 UI developers+

Complexity

http://www.flickr.com/photos/samsushiro/8741594581

How can we do things better?

How can we do things better?

OOCSS

OOCSS is a technique, not a technology

NICOLE SULLIVAN

stubbornella.org

“Following our beloved best practices leads to bad outcomes every. single. time.”

~Nicole Sullivan

.topstories ul.primary { float: left; width: 460px; }.topstories ul.secondary { float: right; width: 140px; }.topstories ul.secondary li { border-bottom: 1px solid #ccc; }

#editorspicks {background: #eee; border-top: 5px solid

#ccc; }#editorspicks ul li { border-bottom: 1px solid #ccc; }

STATS

Style sheets 16float: left; 78font-size: *; 114width: 300px; 34border-top: 5px solid #c4c4c4;

7

.media

.media_reversed

Embrace visual semantics

OPERATIONTWITTER

BOOTSTRAP

THE PLAN

1. Find a framework2. Use it

FRAMEWORKS

• Twitter Bootstrap• OOCSS• inuit.css• Pure

OPERATIONCBC BOOTSTRAP

THE PLAN

1. Identify visual patterns2. Codify objects3. Get crazy with the classes

CHALLENGE

RETRAINING YOUR GUT

BENEFIT

GRIDS ARE A

GATEWAY TO OOCSS

CHALLENGE

NAMING IS HARD

.distinct

BENEFIT

TIGHTER

INTEGRATION WITH

DESIGN

CHALLENGE

FINDING THE RIGHT GRANULARITY

BENEFIT

SEEING THE

REUSE HAPPEN

.contentlist

.contentlist_grid

.repel

.videolink

BENEFIT

A CMS PRODUCES

STANDARDIZED CODE

CHALLENGE

A CMS PRODUCES

STANDARDIZED CODE

LINEUP ROLL

News Sports

The greatest weakness of OOCSS is the tight coupling between HTML and design

OPERATIONWIDOWMAKER

THE QUESTION

How do we have• reusable objects,• fixed HTML, and• multiple themes?

THE ANSWER

SASS @extend

Pre-compile Post-compile

LINEUP ROLL

News Sports

news.scss sports.scss

LINEUP ROLL

News Sports

OutputSASS

@extend

OOCSS

Core Library

news.scss

news.css

sports.scss

sports.css

CHALLENGE

BUILD PROCESS IS MORE COMPLEX

CHALLENGE

COMPILED CODEIS OBFUSCATED

BENEFIT

“BACKWARDS COMPATIBLE”

BENEFIT

OPTIMIZATIONBECOMES CLEAR

PODIUM• Reusable• Scalable

• Flexible• Themeable

STATS

Style sheets 16float: left; 78font-size: *; 114width: 300px; 34border-top: 5px solid #c4c4c4;

7

STATS

Style sheets 16 11float: left; 78 47font-size: *; 114 94width: 300px; 34 3border-top: 5px solid #c4c4c4;

7 1

STATS

Style sheets 16 11 1float: left; 78 47 9font-size: *; 114 94 48width: 300px; 34 3 1border-top: 5px solid #c4c4c4;

7 1 1

RESOURCES

Jonathan SnookSMACSShttp://snook.ca

Nicole SullivanOOCSShttp://stubbornella.org

Harry Robertsinuit.csshttp://csswizardry.com

YandexBEMhttp://bem.info

Jamie Strachanjamie.strachan@cbc.ca