OOCSS IN THE

REAL WORLD A Case Study from the CBC

Jamie Strachan

@jamiestrachan

CBC.CA

3 million pages in Google

4.5 million visits per month

200 stories a day

20 UI developers +

Complexity

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

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: 75%; }

.topstories ul.secondary { float: right; width: 25%; }

.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

float: left;

font-size: *;

width: 300px;

border-top: 5px solid #c4c4c4;

STATS

Style sheets 16

float: left; 78

font-size: *; 114

width: 300px; 34

border-top: 5px solid #c4c4c4; 7

.media

.media_reversed

EMBRACE

VISUAL SEMANTICS

OPERATION

TWITTER BOOTSTRAP

THE PLAN

1. Find a framework

2. Use it

FRAMEWORKS

• Twitter Bootstrap

•OOCSS

• inuit.css

•Pure

OPERATION

CBC BOOTSTRAP

THE PLAN

1. Identify visual patterns

2. Codify objects

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

LINEUP ROLL

News Sports

OPERATION

WIDOWMAKER

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

Output SASS

@extend OOCSS

Core Library

news.scss news.css

sports.scss sports.css

CHALLENGE

BUILD PROCESS IS

MORE COMPLEX

CHALLENGE

COMPILED CODE

IS OBFUSCATED

BENEFIT

“BACKWARD COMPATIBLE”

BENEFIT

OPTIMIZATION

BECOMES CLEAR

PODIUM

• Reusable

• Scalable

• Flexible

• Themeable

STATS

Before

Style sheets 16

float: left; 78

font-size: *; 114

width: 300px; 34

border-top: 5px solid #c4c4c4; 7

STATS

Before After

Style sheets 16 11

float: left; 78 47

font-size: *; 114 94

width: 300px; 34 3

border-top: 5px solid #c4c4c4; 7 1

STATS

Before After Podium

Style sheets 16 11 1

float: left; 78 47 9

font-size: *; 114 94 48

width: 300px; 34 3 1

border-top: 5px solid #c4c4c4; 7 1 1

STATS

Then

Style sheets 1

float: left; 9

font-size: *; 48

width: 300px; 1

border-top: 5px solid #c4c4c4; 1

STATS

Then Now

Style sheets 1 1

float: left; 9 11

font-size: *; 48 54

width: 300px; 1 1

border-top: 5px solid #c4c4c4; 1 1

STATS

Then Now

Style sheets 1 1

float: left; 9 11

font-size: *; 48 54

width: 300px; 1 1

border-top: 5px solid #c4c4c4; 1 1

File size (minified) 38k 54k

CHALLENGE

EDUCATION IS

ESSENTIAL

CHALLENGE

“BACKWARD COMPATIBILITY” IS A

DOUBLE-EDGED SWORD

CHALLENGE

USE SASS

PROPERLY

THE BIG TAKEAWAY

OOCSS IS THE

NEW BEST PRACTICE

RESOURCES

Jonathan Snook SMACSS

http://snook.ca

Nicole Sullivan OOCSS

http://stubbornella.org

Harry Roberts inuit.css

http://csswizardry.com

Yandex BEM

http://bem.info

Jamie Strachan @jamiestrachan