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
•Themeable

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