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 - Revisited

1,402 views

Published on

CBC.ca is one of the biggest and most popular sites in Canada and our team was tasked with overhauling the front-end to improve our site speed and development process.

I'll share the process we went through and highlight the benefits and challenges of moving to OOCSS so you'll be better prepared to do the same.

From this session, you'll learn:
- the key advantages of OOCSS as well as its drawbacks
- how to rebuild an existing site using OOCSS
- how a CSS preprocessor can work with OOCSS
- what has happened in the 12 months since we launched

Originally presented at CSS Dev Conf 2014.

Published in: Technology
  • Be the first to comment

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

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

×