• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
OOCSS for Javascript pirates at jQueryPgh meetup
 

OOCSS for Javascript pirates at jQueryPgh meetup

on

  • 4,617 views

OOCSS for Javascript Pirates

OOCSS for Javascript Pirates

Statistics

Views

Total Views
4,617
Views on SlideShare
4,364
Embed Views
253

Actions

Likes
9
Downloads
44
Comments
0

10 Embeds 253

http://eventifier.co 102
https://twitter.com 57
http://www.scoop.it 33
http://eventifier.com 29
http://speakerrate.com 14
http://startnewday85.blogspot.com 12
http://a0.twimg.com 3
http://twitter.com 1
http://www.docshut.com 1
http://webcache.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • - We’ve already mentioned that layout and styling can be altered at the container level\n- But there’s more to it. There are some powerful inheritance patterns here\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • - The clock makes heavy use of this idea of inheriting runtime state from ancestors\n
  • \n
  • \n
  • \n
  • \n
  • - You won’t always be the one writing the HTML and CSS!\n- Even if you are, you’ll learn to love this\n- OOCSS identity and state become a contract between the view presentation (HTML/CSS) and the view controller (JS), and thus between the HTML/CSS designer and the JS dev\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • - What if you need finer grained values??\n- Show analog clock\n
  • \n
  • \n
  • \n
  • - Tends to happen over time as system evolves\n- Show analog clock\n
  • \n
  • - I’ll be blogging about these 3 soon\n
  • \n
  • \n
  • \n
  • \n

OOCSS for Javascript pirates at jQueryPgh meetup OOCSS for Javascript pirates at jQueryPgh meetup Presentation Transcript

  • oocss for javascript pirates with @jquerypgh rigging, full speed ahead! brian cavalier
  • ahoy! demo!http://bit.ly/css3-digital-clock fork it on github!
  • part I – oocss distilled aye! is it good fer drinkin’, matey?
  • what is oocss? term coined by nicole sullivan*. but what is it? css with a focus on objects plain-old css 2.1 and css 3 works with html4 or html5 works with all major browsers** * http://stubbornella.org **well… ie 6 needs some help, as usual
  • basics of oocss
  • basics of oocss maximizes reuse of css rules
  • basics of oocss maximizes reuse of css rules creates maintainable, concise css
  • 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
  • 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 and, for js pirates: identity vs. state
  • 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!
  • container vs. content<!-- container --><section class=“my-oocss-container”> <!-- content --> <p class=“my-oocss-content” >…</p> <span>some other content</span></section>
  • 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!
  • structure vs. skin structure classes determine layout skin classes determine the look (aka “theme”, “styling”)
  • structure vs. skin<aside class=“structure skin”>…</aside>.structure { .skin { float: left; color: #2faced; width: 8em; border: 1px; max-height: 20em; }}
  • 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
  • aaaarrrrrhh!!not another “cssbest practices”!?! blimey!!this oocss stuff is already startin’ to make me trigger finger itch!
  • “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
  • 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___!”
  • 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/
  • 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”
  • 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…
  • part II – oocss in the pirate’s eye in your good eye, anyway, Brendan! (aaarrrrrrhhh!!!)
  • 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.)
  • 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 () { /*…*/ });
  • oocss inheritance oocss objects inherit from other oocss objects (sound familiar? it should to a js pirate!)
  • oocss inheritance base specializations / mixins { - <tag class=“class1 class2 class3”>…</tag> inheritance is defined in html and css this isn’t broken, but isn’t ideal**sass and less.css attempt to “fix” this (and do a good job of it)
  • oocss inheritance order doesn’t matter {<tag class=“class1 class2 class3”>…</tag>.class1 { } overrides matters! order.class2 { }.class3 { }
  • oocss inheritance
  • oocss inheritance classical oo: classes inherit attributes + behavior
  • oocss inheritance classical oo: classes inherit attributes + behavior pure prototypal: objects inherit attributes + behavior
  • 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
  • oocss inheritance type 1<section class=“base special”>…</section>.base { .special { float: left; margin-right: -0.5em; width: 8em; width: 8.5em;} }
  • 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;}
  • oocss state inheritance identity state { {<tag class=“base special state1 state2”/>.base { }.special { /* inherits .base */ }.state1 { /* run-time overrides */ }.state2 { /* more overrides */ }
  • 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; }
  • part III – fringe benefits fortune and glory! (aaarrrrrhhhh!!!!)
  • loose coupling message passing == loose coupling state classes are messages! change html/css without changing js API == add/remove/toggleClassbad: $(‘.my-widget ul’).css(‘display’, ‘none’); $(‘.my-widget’).addClass(‘no-list’);good: .no-list ul { display: none; }
  • 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; }
  • 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 { }
  • part IV – step by step aaacckkk! too much rope!show me how not to get meself hanged!
  • identify objects #1 rule: ignore the HTML! scan the wireframes for oocss objects: can it be reused? does it have it’s own behavior? For each: “What is it?” -> Identity list run-time states
  • identify objectsprogress bar object states content containers
  • Identity + state classes Identity (“is a”): progress-bar specialization: progress-upload states progress-initializing progress-uploading progress-finalizing progress-complete progress-canceled progress-error
  • 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>
  • 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 { }
  • 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; });});
  • part V – demo!yo ho ho and a hogshead of rum!
  • part VI – pitfalls + antipatterns follow this sage advice or ye’ll end up in a gibbet!!
  • .css() is EVIL
  • .css() is EVIL css does not belong in your javascript!* (*except when it does)
  • .css() is EVIL css does not belong in your javascript!* (*except when it does) animations, too! fadeIn(), fadeOut(), animate(), hide(), show()
  • .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
  • .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
  • avoid IDs and elements bad: div.my-class {} #myNode.my-class {} these create unnecessary specificity ids lure you into creating non-reusable rules
  • oocss vs. ie6 gotcha: .base.state { /* ie6 ignores .base */ } solutions: name-spaced (unambiguous) states e.g.: .base.base-state selectivizr, cujo.js
  • belay that HTML, mate In any reasonably complex system, writing HTML and CSS first is an antipattern Start with wireframes, identify objects and their states, then write HTML
  • discrete vs. continuous Trying to model continuous values with OOCSS state be askin’ fer a flogging..progress-0 .progress-frame div span { width: 0% }.progress-1 .progress-frame div span { width: 1% }....progress-99 .progress-frame div span { width: 99% }.progress-100 .progress-frame div span { width: 100%}
  • horizontal class explosion <section class=“intro colorful-intro orange has- callout has-second-callout exclusive front- page”> Use the cascade: “colorful-intro” is probably a specialization of “intro” Consolidate non-states: e.g. “orange” may be a characteristic of “colorful-intro” Consider SASS/SCSS or Less.css
  • vertical class explosion<div class="progress-bar progress-upload"> <h2 class="progress-canceled">progress title</h2> <div class="progress-frame progress-canceled"> <div><span class="progress-canceled"></span></div> </div> <a href="#" class="cancel-action progress-canceled">x</a> <p class="progress-canceled">canceled!</p></div>
  • vertical class explosion Place state classes as high up in the component’s HTML as possible Use OOCSS inheritance. Remember that descendant nodes can inherit run-time state!<div class="progress-bar progress-upload progress-canceled"> <h2>progress title</h2> ...</div>
  • Keelhauled HTML Having sections of permanently hidden HTML is a bad code smell analog clock: nearly half the HTML elements are permanently hidden Review your objects and wireframes Probably time to refactor HTML & CSS
  • part VII - what be next?weigh anchor and hoist the jib, me hearties, we be all in the wind!
  • oocss design patterns! codifying oocss design patterns 3 so far: Initial State Pattern Revealing Specialization Pattern Inherited Specialization Pattern more on the way!
  • thanks! john hann brian cavalier @unscriptable @briancavalier life image, inc. hovercraft studioshttp://lifeimage.com http://hovercraftstudios.com
  • questions?ye must phrase all queries like a true seadog! landlubbers will be keel-hauled(or tarred-and-feathered – choose yer poison)
  • Go Steelers!You didn’t think it’d be all Pirates, did you?
  • imagesjolly roger: http://flickr.com/photos/earlgpirates: “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/pirate daleks!: http://flickr.com/photos/54459164@N00/5003883529/