Erik's blog

Code, notes, recipes, general musings

notes: Bayjax Meetup @ Yahoo! Sunnyvale (7/27): Nicole Sullivan on OO CSS

leave a comment »


Nicole Sullivan talking about Object Oriented CSS

Nicole Sullivan talking about Object Oriented CSS




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

About these ads

Written by Erik

July 27, 2009 at 7:14 pm

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Get every new post delivered to your Inbox.

%d bloggers like this: