Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

OOCSS presentation

4,157 views

Published on

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/

Published in: Technology, Sports
  • Be the first to comment

OOCSS presentation

  1. 1. OOCSS<br />Object Orientated CSS<br />
  2. 2. The problem? <br />
  3. 3. BLOAT!<br />
  4. 4. Had 700 CSS files<br />Had 1.9mb of CSS<br />
  5. 5. Have to be an expert in the siteto modify or add<br />
  6. 6. Each new addition to the site, the CSS grows<br />
  7. 7. CSS re-use is almost non-existent<br />
  8. 8. Code is fragile, have to be more specific to not break other peoples styling.CSS specificitybombs!<br />
  9. 9. We make a 1:1 relationship of the CSS & the modules we create<br />
  10. 10. How to get round it?<br />OOCSS<br />
  11. 11. Create your CSS like Lego blocks<br />
  12. 12. Lego blocks can be used to make up many different unique structures from the same elements<br />
  13. 13. Create a Component library<br />http://oocss.org/ex/library.html<br />
  14. 14. Separate container and content<br />Break the dependency between the container module and the content<br />
  15. 15. Build the HTML from the component library<br />
  16. 16. Separate structure and skin<br />Abstract the structure of the block from the skin which is being applied<br />
  17. 17. Lego blocks first<br />Design your individual pages only once you have all the lego blocks in front of you<br />
  18. 18. Rule of thumb<br />If two modules look too similar to include on the same page, they are two similar to have on the site.<br />Choose ONE!<br />
  19. 19. Mix and match<br />Container and content objects to achieve high performance design.<br />
  20. 20. Never specify element<br />DO: .class<br />Don’t: div.class<br />
  21. 21. Be Flexible<br />Extensible height and width. <br />Let the grid control the width and the content control the height.<br />
  22. 22. Learn to love grids<br />
  23. 23. Mark up and CSS become predictable & consistent<br />
  24. 24. Photo credits<br />http://www.flickr.com/photos/garlandcannon/4558340132/sizes/l/in/photostream/<br />http://www.flickr.com/photos/shawno/3869415226/sizes/l/in/photostream/<br />http://www.flickr.com/photos/wakingphotolife/5341066143/sizes/l/in/photostream/<br />http://www.flickr.com/photos/evaekeblad/454220744/sizes/o/in/photostream/<br />http://www.flickr.com/photos/builtbydave/4584358158/sizes/l/in/photostream/<br />http://www.flickr.com/photos/seyerce/342265015/sizes/l/in/photostream/<br />http://www.flickr.com/photos/aplumb/3890010967/sizes/l/in/photostream/<br />http://www.flickr.com/photos/teknokool/117340388/sizes/o/in/photostream/<br />http://www.flickr.com/photos/21561428@N03/4991300232/sizes/l/in/photostream/<br />
  25. 25. More info<br />OOCSS framework - https://github.com/stubbornella/oocss/<br />Nicole Sullivan’s blog - http://www.stubbornella.org/<br />Slideshare - http://www.slideshare.net/stubbornella<br />OOCSS.org - http://oocss.org/<br />Me:<br />Twitter: @drewjford<br />Email: andrew@andrewford.co.nz<br />

×