OOCSS IN THE REAL WORLD 
A 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 Google 
4.5 million visits per month 
200 stories a day 
24 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; } 
.topstori...
#editorspicks { 
background: #eee; border-top: 5px solid #ccc; } 
#editorspicks ul li { border-bottom: 1px solid #ccc; }
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
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
LINEUP ROLL 
News 
Sports
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 
“BACKWARDS COMPATIBLE”
BENEFIT 
OPTIMIZATION BECOMES CLEAR
PODIUM 
•Reusable 
•Scalable 
•Flexible 
•Themeable
STATS 
Style sheets 
16 
float: left; 
78 
font-size: *; 
114 
width: 300px; 
34 
border-top: 5px solid #c4c4c4; 
7
STATS 
Style sheets 
16 
11 
float: left; 
78 
47 
font-size: *; 
114 
94 
width: 300px; 
34 
3 
border-top: 5px solid #c4...
STATS 
Style sheets 
16 
11 
1 
float: left; 
78 
47 
9 
font-size: *; 
114 
94 
48 
width: 300px; 
34 
3 
1 
border-top: ...
RESOURCES 
Jonathan Snook SMACSS http://snook.ca 
Nicole Sullivan OOCSS http://stubbornella.org 
Harry Roberts inuit.css h...
OOCSS in the Real World: A Case Study from the CBC
OOCSS in the Real World: A Case Study from the CBC
OOCSS in the Real World: A Case Study from the CBC
OOCSS in the Real World: A Case Study from the CBC
OOCSS in the Real World: A Case Study from the CBC
OOCSS in the Real World: A Case Study from the CBC
OOCSS in the Real World: A Case Study from the CBC
OOCSS in the Real World: A Case Study from the CBC
OOCSS in the Real World: A Case Study from the CBC
OOCSS in the Real World: A Case Study from the CBC
OOCSS in the Real World: A Case Study from the CBC
OOCSS in the Real World: A Case Study from the CBC
OOCSS in the Real World: A Case Study from the CBC
OOCSS in the Real World: A Case Study from the CBC
OOCSS in the Real World: A Case Study from the CBC
OOCSS in the Real World: A Case Study from the CBC
OOCSS in the Real World: A Case Study from the CBC
OOCSS in the Real World: A Case Study from the CBC
OOCSS in the Real World: A Case Study from the CBC
OOCSS in the Real World: A Case Study from the CBC
Upcoming SlideShare
Loading in …5
×

OOCSS in the Real World: A Case Study from the CBC

1,024 views

Published on

This session is a look at the process we went through at the CBC to overhaul our site’s front-end and bring in OOCSS practices. I discuss what OOCSS is and the benefits it offers. You’ll learn about the biggest challenges we faced and how we overcame them (or at least hacked our way through) and you’ll come away with practical ideas about how to embark on your own OOCSS adventure.

Originally presented at FITC Screens 2013.

Published in: Technology, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,024
On SlideShare
0
From Embeds
0
Number of Embeds
123
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Caveat: still applies to mobile
  • Audience Poll
  • 5
  • 20
  • 40
  • OOCSS in the Real World: A Case Study from the CBC

    1. 1. OOCSS IN THE REAL WORLD A Case Study from the CBC
    2. 2. CBC.CA •9.1 million pages in Google •4.5 million visits per month •200 stories a day •24 UI developers
    3. 3. CBC.CA 9.1 million pages in Google 4.5 million visits per month 200 stories a day 24 UI developers + Complexity
    4. 4. http://www.flickr.com/photos/samsushiro/8741594581
    5. 5. How can we do things better?
    6. 6. How can we do things better? OOCSS
    7. 7. OOCSS is a technique, not a technology
    8. 8. NICOLE SULLIVAN stubbornella.org
    9. 9. “Following our beloved best practices leads to bad outcomes every. single. time.” ~Nicole Sullivan
    10. 10. .topstories ul.primary { float: left; width: 460px; } .topstories ul.secondary { float: right; width: 140px; } .topstories ul.secondary li { border-bottom: 1px solid #ccc; }
    11. 11. #editorspicks { background: #eee; border-top: 5px solid #ccc; } #editorspicks ul li { border-bottom: 1px solid #ccc; }
    12. 12. STATS Style sheets 16 float: left; 78 font-size: *; 114 width: 300px; 34 border-top: 5px solid #c4c4c4; 7
    13. 13. .media
    14. 14. .media_reversed
    15. 15. Embrace visual semantics
    16. 16. OPERATION TWITTER BOOTSTRAP
    17. 17. THE PLAN 1.Find a framework 2.Use it
    18. 18. FRAMEWORKS •Twitter Bootstrap •OOCSS •inuit.css •Pure
    19. 19. OPERATION CBC BOOTSTRAP
    20. 20. THE PLAN 1.Identify visual patterns 2.Codify objects 3.Get crazy with the classes
    21. 21. CHALLENGE RETRAINING YOUR GUT
    22. 22. BENEFIT GRIDS ARE A GATEWAY TO OOCSS
    23. 23. CHALLENGE NAMING IS HARD
    24. 24. .distinct
    25. 25. BENEFIT TIGHTER INTEGRATION WITH DESIGN
    26. 26. CHALLENGE FINDING THE RIGHT GRANULARITY
    27. 27. BENEFIT SEEING THE REUSE HAPPEN
    28. 28. .contentlist
    29. 29. .contentlist_grid
    30. 30. .repel
    31. 31. .videolink
    32. 32. BENEFIT A CMS PRODUCES STANDARDIZED CODE
    33. 33. CHALLENGE A CMS PRODUCES STANDARDIZED CODE
    34. 34. LINEUP ROLL News Sports
    35. 35. The greatest weakness of OOCSS is the tight coupling between HTML and design
    36. 36. OPERATION WIDOWMAKER
    37. 37. THE QUESTION How do we have •reusable objects, •fixed HTML, and •multiple themes?
    38. 38. THE ANSWER
    39. 39. SASS @extend Pre-compile Post-compile
    40. 40. LINEUP ROLL News Sports
    41. 41. news.scss sports.scss
    42. 42. LINEUP ROLL News Sports
    43. 43. Output SASS @extend OOCSS Core Library news.scss news.css sports.scss sports.css
    44. 44. CHALLENGE BUILD PROCESS IS MORE COMPLEX
    45. 45. CHALLENGE COMPILED CODE IS OBFUSCATED
    46. 46. BENEFIT “BACKWARDS COMPATIBLE”
    47. 47. BENEFIT OPTIMIZATION BECOMES CLEAR
    48. 48. PODIUM •Reusable •Scalable •Flexible •Themeable
    49. 49. STATS Style sheets 16 float: left; 78 font-size: *; 114 width: 300px; 34 border-top: 5px solid #c4c4c4; 7
    50. 50. STATS Style sheets 16 11 float: left; 78 47 font-size: *; 114 94 width: 300px; 34 3 border-top: 5px solid #c4c4c4; 7 1
    51. 51. STATS 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
    52. 52. 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 jamie.strachan@cbc.ca

    ×