Embed Size (px)
DESCRIPTION
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.
Citation preview
OOCSS IN THE REAL WORLDA 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 Google4.5 million visits per month200 stories a day24 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 16float: left; 78font-size: *; 114width: 300px; 34border-top: 5px solid #c4c4c4;
7
.media
.media_reversed
Embrace visual semantics
OPERATIONTWITTER
BOOTSTRAP
THE PLAN
1. Find a framework2. Use it
FRAMEWORKS
• Twitter Bootstrap• OOCSS• inuit.css• Pure
OPERATIONCBC BOOTSTRAP
THE PLAN
1. Identify visual patterns2. Codify objects3. 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
OPERATIONWIDOWMAKER
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
OutputSASS
@extend
OOCSS
Core Library
news.scss
news.css
sports.scss
sports.css
CHALLENGE
BUILD PROCESS IS MORE COMPLEX
CHALLENGE
COMPILED CODEIS OBFUSCATED
BENEFIT
“BACKWARDS COMPATIBLE”
BENEFIT
OPTIMIZATIONBECOMES CLEAR
PODIUM• Reusable• Scalable
• Flexible• Themeable
STATS
Style sheets 16float: left; 78font-size: *; 114width: 300px; 34border-top: 5px solid #c4c4c4;
7
STATS
Style sheets 16 11float: left; 78 47font-size: *; 114 94width: 300px; 34 3border-top: 5px solid #c4c4c4;
7 1
STATS
Style sheets 16 11 1float: left; 78 47 9font-size: *; 114 94 48width: 300px; 34 3 1border-top: 5px solid #c4c4c4;
7 1 1
RESOURCES
Jonathan SnookSMACSShttp://snook.ca
Nicole SullivanOOCSShttp://stubbornella.org
Harry Robertsinuit.csshttp://csswizardry.com
YandexBEMhttp://bem.info
Jamie [email protected]
![CBC公式ホームページ | CBCテレビ[JOGX-DTV] / CBCラジオ ...CBC公式ホームページ | CBCテレビ[JOGX-DTV] / CBCラジオ](https://img.dokumen.tips/doc/110x75/6075b4954ec3c56938370b69/cbcfffff-cbcfffjogx-dtv-cbcf-cbcfffff.jpg)
