SlideShare a Scribd company logo

OOCSS for JavaScript Pirates jQcon Boston

John Hann
John Hann

At first glance, Object-Oriented CSS looks like yet another rehash of CSS "best practices". Maybe the OO part caught your attention briefly before you dismissed it as a gimmick. Who cares about CSS anyways? I'm a JavaScript Pirate! CSS is for lollygaggers and deck scrubbers! That's what these JavaScript Pirates thought, too, at first. But now that we're skilled in the arcane art of OOCSS, we've come to realize that it not only helps us write better CSS, but it also helps us write much better JavaScript! You too will be able to create kick-ass web apps that are engineering marvels -- able to withstand high seas and hurricane-force winds -- er... or at least unreasonable customer demands. First, we'll review the basics of OOCSS. Then, we'll delve deeper. Way deeper. Attending pirates will learn how to: 1) use OOCSS principles to modularize HTML into reusable components, 2) mate these components with CSS rules and JavaScript ""controllers"", and 3) identify and implement inheritance patterns in CSS, HTML, and JavaScript. More importantly, pirates will discover several little-known secrets about OOCSS. These ""secrets"" are tips and techniques that you won't find in any book, tutorial, or treasure map. They're not even divulged on the OOCSS Github repository! Once you see them in action, you'll never want to do it the ""old way"" again. For certain, by the end of this session, you will: 1) have a much greater appreciation for CSS, 2) understand several simple, yet powerful, techniques for applying OOCSS, and 3) feel much more confident about creating and maintaining large web apps. Arrrrrr, matey!!! Let the wind blow!

1 of 57
Download to read offline
oocss for javascript pirates
            john hann
          brian cavalier
part 1 – oocss distilled
                  aye!
   is it good fer drinkin’, matey?
what is oocss?

term coined by nicole sullivan*.
but what is it?
  another name for css4
  a proposal to patch the holes in css
  a wicked cool library that fixes ie
  none of the above
                                * http://stubbornella.org
what is oocss?

term coined by nicole sullivan*.




         X
but what is it?
  another name for css4
  a proposal to patch the holes in css
  a wicked cool library that fixes ie
  none of the above
|
                                * http://stubbornella.org
what is oocss?

  plain-old css 2.1 and css 3
  works with html4 or html5
  works with all major browsers*


*well… ie 6 needs some help, as usual
basics of oocss

  maximizes reuse of css rules
Ad

Recommended

OOCSS for Javascript pirates at jQueryPgh meetup
OOCSS for Javascript pirates at jQueryPgh meetupOOCSS for Javascript pirates at jQueryPgh meetup
OOCSS for Javascript pirates at jQueryPgh meetupBrian Cavalier
 
Organizing Code with JavascriptMVC
Organizing Code with JavascriptMVCOrganizing Code with JavascriptMVC
Organizing Code with JavascriptMVCThomas Reynolds
 
jQuery: Nuts, Bolts and Bling
jQuery: Nuts, Bolts and BlingjQuery: Nuts, Bolts and Bling
jQuery: Nuts, Bolts and BlingDoug Neiner
 
Write Less Do More
Write Less Do MoreWrite Less Do More
Write Less Do MoreRemy Sharp
 
Unobtrusive javascript with jQuery
Unobtrusive javascript with jQueryUnobtrusive javascript with jQuery
Unobtrusive javascript with jQueryAngel Ruiz
 
jQuery('#knowledge').appendTo('#you');
jQuery('#knowledge').appendTo('#you');jQuery('#knowledge').appendTo('#you');
jQuery('#knowledge').appendTo('#you');mikehostetler
 
jQuery Features to Avoid
jQuery Features to AvoidjQuery Features to Avoid
jQuery Features to Avoiddmethvin
 

More Related Content

What's hot

A Rich Web experience with jQuery, Ajax and .NET
A Rich Web experience with jQuery, Ajax and .NETA Rich Web experience with jQuery, Ajax and .NET
A Rich Web experience with jQuery, Ajax and .NETJames Johnson
 
jQuery in the [Aol.] Enterprise
jQuery in the [Aol.] EnterprisejQuery in the [Aol.] Enterprise
jQuery in the [Aol.] EnterpriseDave Artz
 
jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009Remy Sharp
 
jQuery Fundamentals
jQuery FundamentalsjQuery Fundamentals
jQuery FundamentalsGil Fink
 
An in-depth look at jQuery UI
An in-depth look at jQuery UIAn in-depth look at jQuery UI
An in-depth look at jQuery UIPaul Bakaus
 
A Rich Web Experience with jQuery, Ajax and .NET
A Rich Web Experience with jQuery, Ajax and .NETA Rich Web Experience with jQuery, Ajax and .NET
A Rich Web Experience with jQuery, Ajax and .NETJames Johnson
 
Windows 8 JavaScript (Wonderland)
Windows 8 JavaScript (Wonderland)Windows 8 JavaScript (Wonderland)
Windows 8 JavaScript (Wonderland)Christopher Bennage
 
Stack Overflow Austin - jQuery for Developers
Stack Overflow Austin - jQuery for DevelopersStack Overflow Austin - jQuery for Developers
Stack Overflow Austin - jQuery for DevelopersJonathan Sharp
 
Week 4 - jQuery + Ajax
Week 4 - jQuery + AjaxWeek 4 - jQuery + Ajax
Week 4 - jQuery + Ajaxbaygross
 
SharePoint and jQuery Essentials
SharePoint and jQuery EssentialsSharePoint and jQuery Essentials
SharePoint and jQuery EssentialsMark Rackley
 
Learning jQuery in 30 minutes
Learning jQuery in 30 minutesLearning jQuery in 30 minutes
Learning jQuery in 30 minutesSimon Willison
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQueryZeeshan Khan
 
The Dom Scripting Toolkit J Query
The Dom Scripting Toolkit J QueryThe Dom Scripting Toolkit J Query
The Dom Scripting Toolkit J QueryQConLondon2008
 

What's hot (20)

A Rich Web experience with jQuery, Ajax and .NET
A Rich Web experience with jQuery, Ajax and .NETA Rich Web experience with jQuery, Ajax and .NET
A Rich Web experience with jQuery, Ajax and .NET
 
jQuery Essentials
jQuery EssentialsjQuery Essentials
jQuery Essentials
 
jQuery in the [Aol.] Enterprise
jQuery in the [Aol.] EnterprisejQuery in the [Aol.] Enterprise
jQuery in the [Aol.] Enterprise
 
jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009
 
jQuery Fundamentals
jQuery FundamentalsjQuery Fundamentals
jQuery Fundamentals
 
An in-depth look at jQuery UI
An in-depth look at jQuery UIAn in-depth look at jQuery UI
An in-depth look at jQuery UI
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
 
jQuery Introduction
jQuery IntroductionjQuery Introduction
jQuery Introduction
 
The jQuery Library
The  jQuery LibraryThe  jQuery Library
The jQuery Library
 
A Rich Web Experience with jQuery, Ajax and .NET
A Rich Web Experience with jQuery, Ajax and .NETA Rich Web Experience with jQuery, Ajax and .NET
A Rich Web Experience with jQuery, Ajax and .NET
 
Windows 8 JavaScript (Wonderland)
Windows 8 JavaScript (Wonderland)Windows 8 JavaScript (Wonderland)
Windows 8 JavaScript (Wonderland)
 
Stack Overflow Austin - jQuery for Developers
Stack Overflow Austin - jQuery for DevelopersStack Overflow Austin - jQuery for Developers
Stack Overflow Austin - jQuery for Developers
 
jQuery Basic API
jQuery Basic APIjQuery Basic API
jQuery Basic API
 
Week 4 - jQuery + Ajax
Week 4 - jQuery + AjaxWeek 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
 
SharePoint and jQuery Essentials
SharePoint and jQuery EssentialsSharePoint and jQuery Essentials
SharePoint and jQuery Essentials
 
Jquery ui
Jquery uiJquery ui
Jquery ui
 
Learning jQuery in 30 minutes
Learning jQuery in 30 minutesLearning jQuery in 30 minutes
Learning jQuery in 30 minutes
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
The Dom Scripting Toolkit J Query
The Dom Scripting Toolkit J QueryThe Dom Scripting Toolkit J Query
The Dom Scripting Toolkit J Query
 
jQuery
jQueryjQuery
jQuery
 

Similar to OOCSS for JavaScript Pirates jQcon Boston

CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreRuss Weakley
 
Styling Components with JavaScript: MelbCSS Edition
Styling Components with JavaScript: MelbCSS EditionStyling Components with JavaScript: MelbCSS Edition
Styling Components with JavaScript: MelbCSS Editionbensmithett
 
Sass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LASass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LAJake Johnson
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucksTim Wright
 
CSMess to OOCSS: Refactoring CSS with Object Oriented Design
CSMess to OOCSS: Refactoring CSS with Object Oriented DesignCSMess to OOCSS: Refactoring CSS with Object Oriented Design
CSMess to OOCSS: Refactoring CSS with Object Oriented DesignKate Travers
 
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}Eric Carlisle
 
CSS: A Slippery Slope to the Backend
CSS: A Slippery Slope to the BackendCSS: A Slippery Slope to the Backend
CSS: A Slippery Slope to the BackendFITC
 
Styling components with JavaScript
Styling components with JavaScriptStyling components with JavaScript
Styling components with JavaScriptbensmithett
 
CSS Frameworks
CSS FrameworksCSS Frameworks
CSS FrameworksMike Crabb
 
How to create a basic template
How to create a basic templateHow to create a basic template
How to create a basic templatevathur
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3RAHUL SHARMA
 
SMACSS Your Sass Up
SMACSS Your Sass UpSMACSS Your Sass Up
SMACSS Your Sass UpMina Markham
 
JavaScript for Flex Devs
JavaScript for Flex DevsJavaScript for Flex Devs
JavaScript for Flex DevsAaronius
 
CSS101 - Concept Fundamentals for non UI Developers
CSS101 - Concept Fundamentals for non UI DevelopersCSS101 - Concept Fundamentals for non UI Developers
CSS101 - Concept Fundamentals for non UI DevelopersDarren Gideon
 
Even faster web sites
Even faster web sitesEven faster web sites
Even faster web sitesFelipe Lavín
 
Implementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 WorkshopImplementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 WorkshopShoshi Roberts
 
A bug bounty tale: Chrome, stylesheets, cookies, and AES
A bug bounty tale: Chrome, stylesheets, cookies, and AESA bug bounty tale: Chrome, stylesheets, cookies, and AES
A bug bounty tale: Chrome, stylesheets, cookies, and AEScgvwzq
 

Similar to OOCSS for JavaScript Pirates jQcon Boston (20)

CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
 
Styling Components with JavaScript: MelbCSS Edition
Styling Components with JavaScript: MelbCSS EditionStyling Components with JavaScript: MelbCSS Edition
Styling Components with JavaScript: MelbCSS Edition
 
Sass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LASass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LA
 
Creative Web 2 - CSS
Creative Web 2 - CSS Creative Web 2 - CSS
Creative Web 2 - CSS
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
 
CSMess to OOCSS: Refactoring CSS with Object Oriented Design
CSMess to OOCSS: Refactoring CSS with Object Oriented DesignCSMess to OOCSS: Refactoring CSS with Object Oriented Design
CSMess to OOCSS: Refactoring CSS with Object Oriented Design
 
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
 
CSS: A Slippery Slope to the Backend
CSS: A Slippery Slope to the BackendCSS: A Slippery Slope to the Backend
CSS: A Slippery Slope to the Backend
 
Styling components with JavaScript
Styling components with JavaScriptStyling components with JavaScript
Styling components with JavaScript
 
CSS Frameworks
CSS FrameworksCSS Frameworks
CSS Frameworks
 
How to create a basic template
How to create a basic templateHow to create a basic template
How to create a basic template
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
SMACSS Your Sass Up
SMACSS Your Sass UpSMACSS Your Sass Up
SMACSS Your Sass Up
 
JavaScript for Flex Devs
JavaScript for Flex DevsJavaScript for Flex Devs
JavaScript for Flex Devs
 
CSS101 - Concept Fundamentals for non UI Developers
CSS101 - Concept Fundamentals for non UI DevelopersCSS101 - Concept Fundamentals for non UI Developers
CSS101 - Concept Fundamentals for non UI Developers
 
Even faster web sites
Even faster web sitesEven faster web sites
Even faster web sites
 
Implementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 WorkshopImplementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 Workshop
 
Jquery News Packages
Jquery News PackagesJquery News Packages
Jquery News Packages
 
A bug bounty tale: Chrome, stylesheets, cookies, and AES
A bug bounty tale: Chrome, stylesheets, cookies, and AESA bug bounty tale: Chrome, stylesheets, cookies, and AES
A bug bounty tale: Chrome, stylesheets, cookies, and AES
 
Hardcore CSS
Hardcore CSSHardcore CSS
Hardcore CSS
 

Recently uploaded

Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...DianaGray10
 
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...UiPathCommunity
 
Act Like an Owner, Challenge Like a VC by former CPO, Tripadvisor
Act Like an Owner,  Challenge Like a VC by former CPO, TripadvisorAct Like an Owner,  Challenge Like a VC by former CPO, Tripadvisor
Act Like an Owner, Challenge Like a VC by former CPO, TripadvisorProduct School
 
Campotel: Telecommunications Infra and Network Builder - Company Profile
Campotel: Telecommunications Infra and Network Builder - Company ProfileCampotel: Telecommunications Infra and Network Builder - Company Profile
Campotel: Telecommunications Infra and Network Builder - Company ProfileCampotelPhilippines
 
AI Act & Standardization: UNINFO involvement
AI Act & Standardization: UNINFO involvementAI Act & Standardization: UNINFO involvement
AI Act & Standardization: UNINFO involvementMimmo Squillace
 
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptxThe Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptxNeo4j
 
Avoiding Bad Stats and the Benefits of Playing Trivia with Friends: PancakesC...
Avoiding Bad Stats and the Benefits of Playing Trivia with Friends: PancakesC...Avoiding Bad Stats and the Benefits of Playing Trivia with Friends: PancakesC...
Avoiding Bad Stats and the Benefits of Playing Trivia with Friends: PancakesC...Adrian Sanabria
 
"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro Kozhevin
"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro Kozhevin"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro Kozhevin
"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro KozhevinFwdays
 
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, GoogleISPMAIndia
 
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdfIntroducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdfSafe Software
 
LF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIELF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIEDanBrown980551
 
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...Adrian Sanabria
 
Are Human-generated Demonstrations Necessary for In-context Learning?
Are Human-generated Demonstrations Necessary for In-context Learning?Are Human-generated Demonstrations Necessary for In-context Learning?
Are Human-generated Demonstrations Necessary for In-context Learning?MENGSAYLOEM1
 
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...htrindia
 
IT Nation Evolve event 2024 - Quarter 1
IT Nation Evolve event 2024  - Quarter 1IT Nation Evolve event 2024  - Quarter 1
IT Nation Evolve event 2024 - Quarter 1Inbay UK
 
Confoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data scienceConfoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data scienceSusan Ibach
 
The Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product SchoolThe Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product SchoolProduct School
 
My sample product research idea for you!
My sample product research idea for you!My sample product research idea for you!
My sample product research idea for you!KivenRaySarsaba
 
Digital Transformation Strategy & Plan Templates - www.beyondthecloud.digital...
Digital Transformation Strategy & Plan Templates - www.beyondthecloud.digital...Digital Transformation Strategy & Plan Templates - www.beyondthecloud.digital...
Digital Transformation Strategy & Plan Templates - www.beyondthecloud.digital...MarcovanHurne2
 

Recently uploaded (20)

Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
 
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
 
Act Like an Owner, Challenge Like a VC by former CPO, Tripadvisor
Act Like an Owner,  Challenge Like a VC by former CPO, TripadvisorAct Like an Owner,  Challenge Like a VC by former CPO, Tripadvisor
Act Like an Owner, Challenge Like a VC by former CPO, Tripadvisor
 
Campotel: Telecommunications Infra and Network Builder - Company Profile
Campotel: Telecommunications Infra and Network Builder - Company ProfileCampotel: Telecommunications Infra and Network Builder - Company Profile
Campotel: Telecommunications Infra and Network Builder - Company Profile
 
AI Act & Standardization: UNINFO involvement
AI Act & Standardization: UNINFO involvementAI Act & Standardization: UNINFO involvement
AI Act & Standardization: UNINFO involvement
 
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptxThe Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
 
Avoiding Bad Stats and the Benefits of Playing Trivia with Friends: PancakesC...
Avoiding Bad Stats and the Benefits of Playing Trivia with Friends: PancakesC...Avoiding Bad Stats and the Benefits of Playing Trivia with Friends: PancakesC...
Avoiding Bad Stats and the Benefits of Playing Trivia with Friends: PancakesC...
 
"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro Kozhevin
"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro Kozhevin"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro Kozhevin
"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro Kozhevin
 
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
 
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdfIntroducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
 
LF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIELF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIE
 
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
 
Are Human-generated Demonstrations Necessary for In-context Learning?
Are Human-generated Demonstrations Necessary for In-context Learning?Are Human-generated Demonstrations Necessary for In-context Learning?
Are Human-generated Demonstrations Necessary for In-context Learning?
 
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
 
IT Nation Evolve event 2024 - Quarter 1
IT Nation Evolve event 2024  - Quarter 1IT Nation Evolve event 2024  - Quarter 1
IT Nation Evolve event 2024 - Quarter 1
 
Confoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data scienceConfoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data science
 
The Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product SchoolThe Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product School
 
My sample product research idea for you!
My sample product research idea for you!My sample product research idea for you!
My sample product research idea for you!
 
Digital Transformation Strategy & Plan Templates - www.beyondthecloud.digital...
Digital Transformation Strategy & Plan Templates - www.beyondthecloud.digital...Digital Transformation Strategy & Plan Templates - www.beyondthecloud.digital...
Digital Transformation Strategy & Plan Templates - www.beyondthecloud.digital...
 
In sharing we trust. Taking advantage of a diverse consortium to build a tran...
In sharing we trust. Taking advantage of a diverse consortium to build a tran...In sharing we trust. Taking advantage of a diverse consortium to build a tran...
In sharing we trust. Taking advantage of a diverse consortium to build a tran...
 

OOCSS for JavaScript Pirates jQcon Boston

  • 1. oocss for javascript pirates john hann brian cavalier
  • 2. part 1 – oocss distilled aye! is it good fer drinkin’, matey?
  • 3. what is oocss? term coined by nicole sullivan*. but what is it? another name for css4 a proposal to patch the holes in css a wicked cool library that fixes ie none of the above * http://stubbornella.org
  • 4. what is oocss? term coined by nicole sullivan*. X but what is it? another name for css4 a proposal to patch the holes in css a wicked cool library that fixes ie none of the above | * http://stubbornella.org
  • 5. what is oocss? plain-old css 2.1 and css 3 works with html4 or html5 works with all major browsers* *well… ie 6 needs some help, as usual
  • 6. basics of oocss maximizes reuse of css rules
  • 7. basics of oocss maximizes reuse of css rules creates maintainable, concise css
  • 8. basics of oocss maximizes reuse of css rules creates maintainable, concise css relies on two core principles: separation of container from content separation of structure from skin
  • 9. aaaarrrrrhh!! not another “css best practices”!?! blimey!! this oocss stuff is already startin’ to make me trigger finger itch!
  • 10. oocss objects an oocss object consists of the following parts: 1) an html fragment / dom nodes 2)associated css rules and resources (fonts, images) 3)javascript (behavior, events, etc.)
  • 11. oocss “construction” an oocss object is not actually constructed rather, its parts are associated via a css class name: 1)<tag class=“my-oocss-class”>…</tag> 2).my-oocss-class { /* … */ } 3)$(‘.my-oocss-class’) ! ! .click(function () { /*…*/ });
  • 12. oocss inheritance oocss classes inherit from other classes
  • 13. oocss inheritance X oocss classes inherit from other classes
  • 14. oocss inheritance oocss objects inherit from other oocss objects (sound familiar? it should to a js pirate!)
  • 15. “learn to love grids”* use grid layouts to position content grid columns determine content width content height flows naturally *http://www.slideshare.net/stubbornella/object-oriented-css
  • 16. aaaarrrrrhh!! i ain’t buildin’ no cms system! shiver me timbers!* all this lollygagging with grids, columns, and content… i want dialogs! data-linking! templates! *translation: “wut the f___!”
  • 17. oocss vs. architecture “Each layer in the web stack has its own architecture.”* – Nicole oocss objects don’t correlate with back-end components / views – they are completely independent * http://www.stubbornella.org/content/2010/06/12/visual-semantics-in- html-and-css/
  • 18. aaaarrrrrhh!! this oocss concoction ain’t drinkable! there’s no way i’m going to rejigger every one of me mvc-based php templates so it can work the “oocss way”
  • 19. it’s too bad, too… some of that oocss stuff seemed useful… hmmm… let’s take a look at oocss from the eye of a javascript pirate…
  • 20. part II – oocss in the pirate’s eye in your good eye, anyway, Brendan! (aaarrrrrrhhh!!!)
  • 21. container vs. content content objects flow naturally container objects restrict where/how content objects flow containers don’t have to be only grids and columns!
  • 22. container vs. content <!-- container --> <section class=“my-oocss-container”> ! <!-- content --> ! <p class=“my-oocss-content” >…</p> ! <span>some other content</span> </section>
  • 23. container vs. content content can now be laid-out differently by changing the container object / container class the container and content objects don’t always have to be separate, but often they are!
  • 24. structure vs. skin structure classes determine layout skin classes determine the look (aka “theme”, “styling”)
  • 25. structure vs. skin <aside class=“structure skin”>…</aside> .structure { .skin { ! float: left; ! color: #2faced; ! width: 8em; ! border: 1px; ! max-height: 20em; } }
  • 26. structure v. skin if we want to reuse the skin class, the structure declarations don’t tag along if we want to reuse the structure class, we don’t have skin “stowaways”, either
  • 27. oocss inheritance base overrides / mixins { - <tag class=“class1 class2 class3”>…</tag> inheritance is defined in html, not css this isn’t broken, but isn’t ideal* *sass and less.css attempt to “fix” this (and do a good job of it)
  • 28. oocss inheritance order doesn’t matter { <tag class=“class1 class2 class3”>…</tag> .class1 { } overrides matters! order .class2 { } .class3 { }
  • 29. oocss inheritance classical oo: classes inherit attributes + behavior
  • 30. oocss inheritance classical oo: classes inherit attributes + behavior pure prototypal: objects inherit attributes + behavior
  • 31. oocss inheritance classical oo: classes inherit attributes + behavior pure prototypal: objects inherit attributes + behavior oocss: objects inherit attributes + run-time state inheritance is defined two different ways
  • 32. oocss inheritance type 1 <section class=“base special”>…</section> .base { .special { ! float: left; ! margin-right: -0.5em; ! width: 8em; ! width: 8.5em; } }
  • 33. oocss inheritance type 2 span inherits from button - ! <button class=“simple-action with-icon”> ! ! <span>content / data</span> ! </button> .with-icon { color: #bada55; } .with-icon span { /* inherits with-icon! */ ! margin-left: 32px; }
  • 34. oocss state inheritance identity state { { <tag class=“base special state1 state2”/> .base { } .special { /* inherits .base */ } .state1 { /* run-time overrides */ } .state2 { /* more overrides */ }
  • 35. oocss state inheritance <div class=“base-view my-view unbound”> ! <h4>some title</h4> ! <span>raw content / data</span> </div> .base-view.unbound { color: #abacab; } .base-view.unbound span { visibility: hidden; }
  • 36. part III – fringe benefits fortune and glory! (aaarrrrrhhhh!!!!)
  • 37. loose coupling message passing == loose coupling state classes are messages! change html/css without changing js bad: $(‘.my-widget ul’).css(‘display’, ‘none’); $(‘.my-widget’).addClass(‘no-list’); good: .no-list ul { display: none; }
  • 38. separation of concerns styling / layout separated from behavior css/html and js dev work independently bad: good: $(‘.my-view’) $(‘.my-view’) ! .find(‘li’) ! .addClass(‘filtered’); ! .css(‘color’, ‘red’) –––––––––––––––– ! .filter(‘.obsolete’) .filtered li { color: red; } ! .css(‘color’, ‘gray’); .filtered li.obsolete { ! color: gray; }
  • 39. organized css css is organized into object “classes” just like all of your other code .progress-bar { } .progress-bar .cancel-button { } .progress-bar .spinner { } .progress-bar .progress-frame div span { } .progress-bar.progress-complete { }! .progress-bar.progress-error { }
  • 40. part IV – step by step aaacckkk! too much rope! show me how not to get meself hanged!
  • 41. identify objects #1 rule: ignore the HTML! scan the wire frames for oocss objects: can it be reused? does it have it’s own behavior? list run-time states
  • 42. identify objects progress bar object states content containers
  • 43. html template <div class="progress-bar progress-upload"> ! <h2>progress title</h2> ! <div class="progress-frame"> ! ! <div><span></span></div> ! </div> ! <a href="#" class="cancel-action">x</a> ! <p>transaction status</p> </div>
  • 44. css classes .progress-bar { } .progress-bar.progress-canceled h2 { }! .progress-bar.progress-complete h2 { }! .progress-bar.progress-error h2 { } .progress-frame { } .progress-frame div { } .progress-frame div span { } .progress-display .cancel-action { } .progress-upload { }
  • 45. javascript controller $(‘.progress-bar’).each(function () { ! var progressBar = $(this); ! progressBar.find(‘.cancel-action’) ! ! .click(function () { ! ! ! progressBar.addClass(‘progress-canceled’) ! ! ! ! .find(‘h2’).text(‘Canceled’); ! ! ! /* coordinate actual cancel work here */ ! ! ! return false; ! ! }); });
  • 46. part V – pitfalls follow this sage advice or ye’ll end up in a gibbet!!
  • 47. .css() is EVIL css does not belong in your javascript!* (*except when it does)
  • 48. .css() is EVIL css does not belong in your javascript!* (*except when it does) animations, too! fadeIn(), fadeOut(), animate(), hide(), show()
  • 49. .css() is EVIL css does not belong in your javascript!* (*except when it does) animations, too! fadeIn(), fadeOut(), animate(), hide(), show() css3 + progressive enhancement or
  • 50. .css() is EVIL css does not belong in your javascript!* (*except when it does) animations, too! fadeIn(), fadeOut(), animate(), hide(), show() css3 + progressive enhancement or regressive enhancement: jquery css transitions, cujo.js
  • 51. avoid IDs and elements bad: div.my-class {} #myNode.my-class {} these create unnecessary specificity ids lure you into creating non-reusable rules
  • 52. “class-itis” <section class=“intro colorful-intro has-callout has-second-callout exclusive front-page”> consolidate similar rules / classes consider using SASS or Less.css in complex applications
  • 53. oocss vs. ie6 gotcha: .base.state { /* ie6 ignores .base */ } solutions: name-spaced (unambiguous) states e.g.: .base.base-state selectivizr, cujo.js
  • 54. part VI – demo! http://bit.ly/css3-digital-clock fork it on github!
  • 55. thanks! john hann brian cavalier @unscriptable @briancavalier life image, inc. hovercraft studios http://lifeimage.com http://hovercraftstudios.com
  • 56. questions? ye must phrase all queries like a true seadog! landlubbers will be keel-hauled (or tarred-and-feathered – choose yer poison)
  • 57. images jolly roger: http://flickr.com/photos/earlg pirates: “Don’t mess with pirates - Declan Hann” http://www.flickr.com/photos/slipstreamblue/2716444681/ http://www.flickr.com/photos/brothermagneto/3476288029/ http://www.flickr.com/photos/jsconf/4587502948/ http://www.flickr.com/photos/fenchurch/237726110/ moon shine still: http://flickr.com/photos/seanlloyd/ gold coins: http://www.flickr.com/photos/myklroventine/3400039523/ dead pirate: http://www.flickr.com/photos/jeffreykeefer/540423620/ corsair: http://www.flickr.com/photos/portofsandiego/4952170821/ ducks: http://www.flickr.com/photos/tiefpunkt/2571937817/ piece of eight: http://flickr.com/photos/woodysworld1778/