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.

1. OOCSS IN THE
REAL WORLD
A Case Study from the CBC

5. CBC.CA
• 9.1 million pages in Google
• 4.5 million visits per month
• 200 stories a day
• 24 UI developers

6. CBC.CA
9.1 million pages in Google
4.5 million visits per month
200 stories a day
24 UI developers+
Complexity

7. http://www.flickr.com/photos/samsushiro/8741594581

8. How can we do things better?

9. How can we do things better?
OOCSS

10. OOCSS is a technique, not a
technology

11. NICOLE SULLIVAN
stubbornella.org

12. “Following our beloved best
practices leads to bad outcomes
every. single. time.”
~Nicole Sullivan

14. .topstories ul.primary { float: left; width: 460px; }
.topstories ul.secondary { float: right; width: 140px; }
.topstories ul.secondary li { border-bottom: 1px solid
#ccc; }

16. #editorspicks {
background: #eee; border-top: 5px solid #ccc; }
#editorspicks ul li { border-bottom: 1px solid #ccc; }

17. STATS
Style sheets 16
float: left; 78
font-size: *; 114
width: 300px; 34
border-top: 5px solid #c4c4c4; 7

22. .media

23. .media_reversed

24. Embrace visual semantics

25. OPERATION
TWITTER BOOTSTRAP

26. THE PLAN
1. Find a framework
2. Use it

27. FRAMEWORKS
• Twitter Bootstrap
• OOCSS
• inuit.css
• Pure

29. OPERATION
CBC BOOTSTRAP

30. THE PLAN
1. Identify visual patterns
2. Codify objects
3. Get crazy with the classes

31. CHALLENGE
RETRAINING YOUR
GUT

32. BENEFIT
GRIDS ARE A
GATEWAY TO
OOCSS

33. CHALLENGE
NAMING IS HARD

35. .distinct

36. BENEFIT
TIGHTER
INTEGRATION WITH
DESIGN

38. CHALLENGE
FINDING THE RIGHT
GRANULARITY

39. BENEFIT
SEEING THE
REUSE HAPPEN

40. .contentlist

41. .contentlist_grid

42. .repel

43. .videolink

45. BENEFIT
A CMS PRODUCES
STANDARDIZED
CODE

46. CHALLENGE
A CMS PRODUCES
STANDARDIZED
CODE

47. LINEUP ROLL
News Sports

48. The greatest weakness of OOCSS is
the tight coupling between HTML and
design

51. OPERATION
WIDOWMAKER

52. THE QUESTION
How do we have
• reusable objects,
• fixed HTML, and
• multiple themes?

53. THE ANSWER

54. SASS @extend
Pre-compile Post-compile

55. LINEUP ROLL
News Sports

57. news.scss sports.scss

58. LINEUP ROLL
News Sports

59. Output
SASS
@extend
OOCSS
Core
Library
news.scss news.css
sports.scss sports.css

60. CHALLENGE
BUILD PROCESS IS
MORE COMPLEX

61. CHALLENGE
COMPILED CODE
IS OBFUSCATED

63. BENEFIT
“BACKWARDS
COMPATIBLE”

65. BENEFIT
OPTIMIZATION
BECOMES CLEAR

68. PODIUM
• Reusable
• Scalable
• Flexible
• Themeabl
e

69. STATS
Style sheets 16
float: left; 78
font-size: *; 114
width: 300px; 34
border-top: 5px solid #c4c4c4; 7

70. STATS
Style sheets 16 11
float: left; 78 47
font-size: *; 114 94
width: 300px; 34 3
border-top: 5px solid #c4c4c4; 7 1

71. 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

72. 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