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