[caption id="" align=“aligncenter” width=“500” caption=“Nicole Sullivan talking about Object Oriented CSS”] 
[/caption]
meetup: http://www.meetup.com/BayJax/calendar/10852424/
nicole sullivan (@stubbornella) on object-oriented css
- slides are on slideshare/stubbornella
- how we are doing css wrong:
-- we require expert-level developers to be effective
-- filesize is growing out of control
-- code re-use is almost nonexistant
-- code is too fragile
- most important mistake: we write overly clever modules; everything is a one-off
-- so size increases best-case at a 1-1 rate
- so what is oocss?
-- stubbornella did write an open-source framework
-- oocss lives to the left of the curly braces
- pieces: selctors
-- the size of the css file is one of the largest factors in css performance; focus on http requests
-- reflows and rendering is not that important
-- duplication is worse than stale rules
-- define default values; don’t repeat defaults
-- define structure in a separate class
-- style classes rather than elements; define styles to be dom-independant
-- avoid styling elements; define styles in classes
-- give all our rules the same strength; make every rule to have the same speceficity
-- use hacks sparingly
--- we should only need hacks for ie 5.5, 6, and maybe 7; nothing else requires it
--- use underscore and star instead of js to apply browser hacks
-- avoid specifying location, eg use .sidenave instead of .nav ul
-- avoid overly-specific classes
-- avoid singeltons, ie aoid using ids
--- ids kill re-use
-- use mixins
-- use encapsulation
--- if an object can live on its own, use wrapper classes. Otherwise, avoid cascading
- heading
-- componenets are like reusable legos
-- > reusing elements makes them performance freebees <
-- avoid duplication
-- avoid nearly identical modules
--- rule: if two modules are two similar to include next to each other, they’re too close for the same site
-- avoid location-depemdent styles
--- “HEADING” shouldn’t become “heading” on another part of the page
--- define global defaults
--- apply styles to classes instead of elements
---- respects semantics while allowing visual flexibility
-- do we really need more than 6 headings?
- module
- grid
- questiojns
-- if the html is broken, nice css wont work, right?
--- yes. a css obj is composed of html and css
-- any research into compilation?
--- the w3c should implement “extends” and “inherits” instead of us using compilation