Successfully reported this slideshow.
Your SlideShare is downloading. ×

OOCSS for JavaScript Pirates jQcon Boston

OOCSS for JavaScript Pirates jQcon Boston

Download to read offline

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!

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!

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

OOCSS for JavaScript Pirates jQcon Boston

  1. 1. oocss for javascript pirates john hann brian cavalier
  2. 2. part 1 – oocss distilled aye! is it good fer drinkin’, matey?
  3. 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. 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. 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. 6. basics of oocss maximizes reuse of css rules
  7. 7. basics of oocss maximizes reuse of css rules creates maintainable, concise css
  8. 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. 9. aaaarrrrrhh!! not another “css best practices”!?! blimey!! this oocss stuff is already startin’ to make me trigger finger itch!
  10. 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. 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. 12. oocss inheritance oocss classes inherit from other classes
  13. 13. oocss inheritance X oocss classes inherit from other classes
  14. 14. oocss inheritance oocss objects inherit from other oocss objects (sound familiar? it should to a js pirate!)
  15. 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. 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. 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. 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. 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. 20. part II – oocss in the pirate’s eye in your good eye, anyway, Brendan! (aaarrrrrrhhh!!!)
  21. 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. 22. container vs. content <!-- container --> <section class=“my-oocss-container”> ! <!-- content --> ! <p class=“my-oocss-content” >…</p> ! <span>some other content</span> </section>
  23. 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. 24. structure vs. skin structure classes determine layout skin classes determine the look (aka “theme”, “styling”)
  25. 25. structure vs. skin <aside class=“structure skin”>…</aside> .structure { .skin { ! float: left; ! color: #2faced; ! width: 8em; ! border: 1px; ! max-height: 20em; } }
  26. 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. 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. 28. oocss inheritance order doesn’t matter { <tag class=“class1 class2 class3”>…</tag> .class1 { } overrides matters! order .class2 { } .class3 { }
  29. 29. oocss inheritance classical oo: classes inherit attributes + behavior
  30. 30. oocss inheritance classical oo: classes inherit attributes + behavior pure prototypal: objects inherit attributes + behavior
  31. 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. 32. oocss inheritance type 1 <section class=“base special”>…</section> .base { .special { ! float: left; ! margin-right: -0.5em; ! width: 8em; ! width: 8.5em; } }
  33. 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. 34. oocss state inheritance identity state { { <tag class=“base special state1 state2”/> .base { } .special { /* inherits .base */ } .state1 { /* run-time overrides */ } .state2 { /* more overrides */ }
  35. 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. 36. part III – fringe benefits fortune and glory! (aaarrrrrhhhh!!!!)
  37. 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. 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. 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. 40. part IV – step by step aaacckkk! too much rope! show me how not to get meself hanged!
  41. 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. 42. identify objects progress bar object states content containers
  43. 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. 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. 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. 46. part V – pitfalls follow this sage advice or ye’ll end up in a gibbet!!
  47. 47. .css() is EVIL css does not belong in your javascript!* (*except when it does)
  48. 48. .css() is EVIL css does not belong in your javascript!* (*except when it does) animations, too! fadeIn(), fadeOut(), animate(), hide(), show()
  49. 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. 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. 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. 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. 53. oocss vs. ie6 gotcha: .base.state { /* ie6 ignores .base */ } solutions: name-spaced (unambiguous) states e.g.: .base.base-state selectivizr, cujo.js
  54. 54. part VI – demo! http://bit.ly/css3-digital-clock fork it on github!
  55. 55. thanks! john hann brian cavalier @unscriptable @briancavalier life image, inc. hovercraft studios http://lifeimage.com http://hovercraftstudios.com
  56. 56. questions? ye must phrase all queries like a true seadog! landlubbers will be keel-hauled (or tarred-and-feathered – choose yer poison)
  57. 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/

×