oocss for javascript piratesjohn hann

brian cavalier

part 1 – oocss distilledaye!

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*. 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 aboveX| * 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

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

not another “css best practices”!?!

blimey!!

this oocss stuff is already startin’ to make me trigger finger itch!

aaaarrrrrhh!!

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 classes inherit from other classes

oocss inheritance

oocss classes inherit from other classesX

oocss inheritance

oocss objects inherit from other oocss objects

(sound familiar? it should to a js pirate!)

“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

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___!”

aaaarrrrrhh!!

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/

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”

aaaarrrrrhh!!

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 eyein your good eye, anyway, Brendan!

(aaarrrrrrhhh!!!)

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 {

! float: left;

! width: 8em;

! max-height: 20em;

}

.skin {

! color: #2faced;

! border: 1px;

}

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

oocss inheritance

inheritance is defined in html, not css

this isn’t broken, but isn’t ideal*

<tag class=“class1 class2 class3”>…</tag>

base overrides / mixins{-*sass and less.css attempt to “fix” this (and do a good job of it)

oocss inheritance

<tag class=“class1 class2 class3”>…</tag>

order doesn’t matter{.class1 { }

.class2 { }

.class3 { }

orde

rm

atte

rs!

over

ride

s

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 stateinheritance is defined two different ways

oocss inheritance type 1

<section class=“base special”>…</section>

.base {

! float: left;

! width: 8em;

}

.special {

! margin-right: -0.5em;

! width: 8.5em;

}

oocss inheritance type 2

! <button class=“simple-action with-icon”>

! ! <span>content / data</span>

! </button>

.with-icon { color: #bada55; }

.with-icon span { /* inherits with-icon! */! margin-left: 32px; }

span inherits from button-

oocss state inheritance

<tag class=“base special state1 state2”/>

{identity {state

.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 benefitsfortune and glory!

(aaarrrrrhhhh!!!!)

loose coupling

message passing == loose coupling

state classes are messages!

change html/css without changing js

$(‘.my-widget ul’).css(‘display’, ‘none’);

$(‘.my-widget’).addClass(‘no-list’);

.no-list ul { display: none; }

bad:

good:

separation of concerns

styling / layout separated from behavior

css/html and js dev work independently

$(‘.my-view’)! .find(‘li’)! .css(‘color’, ‘red’)! .filter(‘.obsolete’)! .css(‘color’, ‘gray’);

$(‘.my-view’)! .addClass(‘filtered’);––––––––––––––––.filtered li { color: red; }.filtered li.obsolete { ! color: gray; }

bad: good:

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 stepaaacckkk! too much rope!

show me how not to get meself hanged!

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

identify objects

states

containers

content

progress bar object

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 – pitfallsfollow this sage advice or ye’ll end up in a gibbet!!

.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

“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

oocss vs. ie6

gotcha:

.base.state { /* ie6 ignores .base */ }

solutions:

name-spaced (unambiguous) statese.g.: .base.base-state

selectivizr, cujo.js

part VI – demo!http://bit.ly/css3-digital-clock

fork it on github!

thanks!

brian cavalier@briancavalier

hovercraft studioshttp://hovercraftstudios.com

john hann@unscriptable

life image, inc.http://lifeimage.com

questions?ye must phrase all queries like a true seadog!

landlubbers will be keel-hauled (or tarred-and-feathered – choose yer poison)

imagesjolly 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/