OOCSS in the Real World: A Case Study from the CBC - Revisited
-
Upload
jamie-strachan -
Category
Technology
-
view
511 -
download
1
description
Transcript of OOCSS in the Real World: A Case Study from the CBC - Revisited
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