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; }
.topstories...
#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
• Themeabl
e
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 #c4c4c4; 7 1
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...
RESOURCES
Jonathan Snook
SMACSS
http://snook.ca
Nicole Sullivan
OOCSS
http://stubbornella.org
Harry Roberts
inuit.css
http...
OOCSS in the Real World: A Case Study from the CBC with Jamie Strachan
OOCSS in the Real World: A Case Study from the CBC with Jamie Strachan
OOCSS in the Real World: A Case Study from the CBC with Jamie Strachan
OOCSS in the Real World: A Case Study from the CBC with Jamie Strachan
OOCSS in the Real World: A Case Study from the CBC with Jamie Strachan
OOCSS in the Real World: A Case Study from the CBC with Jamie Strachan
OOCSS in the Real World: A Case Study from the CBC with Jamie Strachan
OOCSS in the Real World: A Case Study from the CBC with Jamie Strachan
OOCSS in the Real World: A Case Study from the CBC with Jamie Strachan
OOCSS in the Real World: A Case Study from the CBC with Jamie Strachan
OOCSS in the Real World: A Case Study from the CBC with Jamie Strachan
OOCSS in the Real World: A Case Study from the CBC with Jamie Strachan
OOCSS in the Real World: A Case Study from the CBC with Jamie Strachan
OOCSS in the Real World: A Case Study from the CBC with Jamie Strachan
OOCSS in the Real World: A Case Study from the CBC with Jamie Strachan
OOCSS in the Real World: A Case Study from the CBC with Jamie Strachan
OOCSS in the Real World: A Case Study from the CBC with Jamie Strachan
OOCSS in the Real World: A Case Study from the CBC with Jamie Strachan
OOCSS in the Real World: A Case Study from the CBC with Jamie Strachan
OOCSS in the Real World: A Case Study from the CBC with Jamie Strachan
Upcoming SlideShare
Loading in...5
×

OOCSS in the Real World: A Case Study from the CBC with Jamie Strachan

311

Published on

Presented at SCREENS 2013 in Toronto.
Details at fitc.ca/screens

Object Oriented CSS is starting to gain serious traction in the web development world. OOCSS, SMACSS, BEM, Twitter Bootstrap, inuit.css, Pure… all of these share underlying principles that force us to re-evaluate our best practices. This is daunting enough for the average site but borders on lunacy for one of the biggest and most popular sites in Canada: CBC.ca.

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. We’ll 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.

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

No Downloads
Views
Total Views
311
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
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 with Jamie Strachan

    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 • Themeabl e
    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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×