OOCSS presentation


Published on

Presentation I did at the Tauranga Web Meetup. All credit to Nicole Sullivan for this, I just tried to relay the message.


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

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Hi I’m Andrew Ford, I’m a Team leader and UI Developer at Cucumber. On Feburay the 13th I attended a workshop at Webstock calledCSS of the future – Building with Object Orientated CSS. It was run by Nicole Sullivan. She’s worked for the likes of Facebook, Yahoo, Box.net and salesforce.
  • So you have a large site, with tons of pages and multiple layouts'. Your constantly adding new features, updating old ones, getting multiple people to work on the site who are less familiar with it so on and so on. What happens to your CSS?
  • You end up with bloat and a poor performing website.
  • This happened to Facebook. Before Nicole started helping them they had 700 css files, they had 1.9mb of CSS. Prime example of massive CSS gone wrong in about 2007.
  • With Massive sites you have to be an expert of the site to modify or add to the css
  • Each feature or module you add the CSS grows
  • Do you guys know what a specificitybomb is? It’s were you keep adding elements to your styling so no one else on the team can override it.
  • We make a 1:1 relationship of the CSS and the modules we create soon enough we’ve doubled or tripled the size of the CSS, and were struggling to make changes due to all the bugs we create.
  • 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 />