• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
OOCSS in the Real World: A Case Study from the CBC with Jamie Strachan
 

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

on

  • 354 views

Presented at SCREENS 2013 in Toronto. ...

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.

Statistics

Views

Total Views
354
Views on SlideShare
354
Embed Views
0

Actions

Likes
1
Downloads
10
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Caveat: still applies to mobile
  • Audience Poll
  • 5
  • 20
  • 40

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

  • OOCSS IN THE REAL WORLD A Case Study from the CBC
  • CBC.CA • 9.1 million pages in Google • 4.5 million visits per month • 200 stories a day • 24 UI developers
  • CBC.CA 9.1 million pages in Google 4.5 million visits per month 200 stories a day 24 UI developers+ Complexity
  • http://www.flickr.com/photos/samsushiro/8741594581
  • How can we do things better?
  • How can we do things better? OOCSS
  • OOCSS is a technique, not a technology
  • NICOLE SULLIVAN stubbornella.org
  • “Following our beloved best practices leads to bad outcomes every. single. time.” ~Nicole Sullivan
  • .topstories ul.primary { float: left; width: 460px; } .topstories ul.secondary { float: right; width: 140px; } .topstories ul.secondary li { border-bottom: 1px solid #ccc; }
  • #editorspicks { background: #eee; border-top: 5px solid #ccc; } #editorspicks ul li { border-bottom: 1px solid #ccc; }
  • STATS Style sheets 16 float: left; 78 font-size: *; 114 width: 300px; 34 border-top: 5px solid #c4c4c4; 7
  • .media
  • .media_reversed
  • Embrace visual semantics
  • OPERATION TWITTER BOOTSTRAP
  • THE PLAN 1. Find a framework 2. Use it
  • FRAMEWORKS • Twitter Bootstrap • OOCSS • inuit.css • Pure
  • OPERATION CBC BOOTSTRAP
  • THE PLAN 1. Identify visual patterns 2. Codify objects 3. Get crazy with the classes
  • CHALLENGE RETRAINING YOUR GUT
  • BENEFIT GRIDS ARE A GATEWAY TO OOCSS
  • CHALLENGE NAMING IS HARD
  • .distinct
  • BENEFIT TIGHTER INTEGRATION WITH DESIGN
  • CHALLENGE FINDING THE RIGHT GRANULARITY
  • BENEFIT SEEING THE REUSE HAPPEN
  • .contentlist
  • .contentlist_grid
  • .repel
  • .videolink
  • BENEFIT A CMS PRODUCES STANDARDIZED CODE
  • CHALLENGE A CMS PRODUCES STANDARDIZED CODE
  • LINEUP ROLL News Sports
  • The greatest weakness of OOCSS is the tight coupling between HTML and design
  • OPERATION WIDOWMAKER
  • THE QUESTION How do we have • reusable objects, • fixed HTML, and • multiple themes?
  • THE ANSWER
  • SASS @extend Pre-compile Post-compile
  • LINEUP ROLL News Sports
  • news.scss sports.scss
  • LINEUP ROLL News Sports
  • Output SASS @extend OOCSS Core Library news.scss news.css sports.scss sports.css
  • CHALLENGE BUILD PROCESS IS MORE COMPLEX
  • CHALLENGE COMPILED CODE IS OBFUSCATED
  • BENEFIT “BACKWARDS COMPATIBLE”
  • BENEFIT OPTIMIZATION BECOMES CLEAR
  • PODIUM • Reusable • Scalable • Flexible • Themeabl e
  • STATS Style sheets 16 float: left; 78 font-size: *; 114 width: 300px; 34 border-top: 5px solid #c4c4c4; 7
  • STATS Style sheets 16 11 float: left; 78 47 font-size: *; 114 94 width: 300px; 34 3 border-top: 5px solid #c4c4c4; 7 1
  • 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
  • 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