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

687 views

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
687
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
12
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

    ×