OCSS is an approach to CSS that focuses on maximizing reuse through separation of concerns. It advocates separating container styles from content and structure styles from skin/presentation styles. OCSS objects consist of HTML, CSS rules, and JavaScript behavior associated via a class name. Classes can inherit styles and states from other classes. The approach aims to create loosely coupled, maintainable CSS through principles like reuse, separation of concerns, and object-oriented modeling of components.
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
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
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 () { /*…*/ });
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!
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”)
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)
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
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
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
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)