Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,116 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
  • Be the first to comment

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

×