Embed Size (px)
DESCRIPTION
Presentation I did at the Tauranga Web Meetup. All credit to Nicole Sullivan for this, I just tried to relay the message.http://oocss.org/http://www.stubbornella.org/
Citation preview
OOCSSObject Orientated CSS
The problem?
BLOAT!
Had 700 CSS files
Had 1.9mb of CSS
Have to be an expert in the siteto modify or add
Each new addition to the site, the CSS grows
CSS re-use is almost non-existent
Code is fragile, have to be more specific to not break other peoples styling.
CSS specificity bombs!
We make a 1:1 relationship of the CSS & the modules we create
How to get round it?
OOCSS
Create your CSS like Lego blocks
Lego blocks can be used to make up many different unique structures from the same
elements
Separate container and content
Break the dependency between the container module and the content
Build the HTML from the component library
Separate structure and skin
Abstract the structure of the block from the skin which is being applied
Lego blocks first
Design your individual pages only once you have all the lego blocks in
front of you
Rule of thumb
If two modules look too similar to include on the same page, they are two similar to have
on the site.Choose ONE!
Mix and match
Container and content objects to achieve high performance design.
Never specify element
DO: .classDon’t: div.class
Be Flexible
Extensible height and width. Let the grid control the width and the
content control the height.
Learn to love grids
Mark up and CSS become predictable & consistent
Photo creditshttp://www.flickr.com/photos/garlandcannon/4558340132/sizes/l/in/photostream/
http://www.flickr.com/photos/shawno/3869415226/sizes/l/in/photostream/
http://www.flickr.com/photos/wakingphotolife/5341066143/sizes/l/in/photostream/
http://www.flickr.com/photos/evaekeblad/454220744/sizes/o/in/photostream/
http://www.flickr.com/photos/builtbydave/4584358158/sizes/l/in/photostream/
http://www.flickr.com/photos/seyerce/342265015/sizes/l/in/photostream/
http://www.flickr.com/photos/aplumb/3890010967/sizes/l/in/photostream/
http://www.flickr.com/photos/teknokool/117340388/sizes/o/in/photostream/
http://www.flickr.com/photos/21561428@N03/4991300232/sizes/l/in/photostream/
More info
• OOCSS framework - https://github.com/stubbornella/oocss/
• Nicole Sullivan’s blog - http://www.stubbornella.org/• Slideshare - http://www.slideshare.net/stubbornella• OOCSS.org - http://oocss.org/• Me:– Twitter: @drewjford– Email: [email protected]
