oocss in the real world: a case study from the cbc - revisited
DESCRIPTION
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.TRANSCRIPT
OOCSS IN THE
REAL WORLD A Case Study from the CBC
Jamie Strachan
@jamiestrachan
CBC.CA
3 million pages in Google
4.5 million visits per month
200 stories a day
20 UI developers +
Complexity
http://www.flickr.com/photos/samsushiro/8741594581
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: 75%; }
.topstories ul.secondary { float: right; width: 25%; }
.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
float: left;
font-size: *;
width: 300px;
border-top: 5px solid #c4c4c4;
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
LINEUP ROLL
News Sports
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
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
“BACKWARD COMPATIBLE”
BENEFIT
OPTIMIZATION
BECOMES CLEAR
PODIUM
• Reusable
• Scalable
• Flexible
• Themeable
STATS
Before
Style sheets 16
float: left; 78
font-size: *; 114
width: 300px; 34
border-top: 5px solid #c4c4c4; 7
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
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
STATS
Then
Style sheets 1
float: left; 9
font-size: *; 48
width: 300px; 1
border-top: 5px solid #c4c4c4; 1
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
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
CHALLENGE
EDUCATION IS
ESSENTIAL
CHALLENGE
“BACKWARD COMPATIBILITY” IS A
DOUBLE-EDGED SWORD
CHALLENGE
USE SASS
PROPERLY
THE BIG TAKEAWAY
OOCSS IS THE
NEW BEST PRACTICE
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