OOCSS presentation
•Download as PPTX, PDF•
4 likes•2,282 views
OOCSS (Object Oriented CSS) is a methodology for writing scalable and reusable CSS code. It involves separating CSS into modular blocks or "lego blocks" that can be mixed and matched to build pages. This avoids CSS bloat and makes the code more flexible and maintainable. Key principles include separating container styles from content, using classes instead of element names, making elements extensible with grids, and building pages from the available CSS components.
Recommended
More Related Content
What's hot
What's hot (16)
Viewers also liked
Viewers also liked (7)
Similar to OOCSS presentation
Similar to OOCSS presentation (20)
Recently uploaded
Recently uploaded (20)
OOCSS presentation
- 1. OOCSS Object Orientated CSS
- 2. The problem?
- 3. BLOAT!
- 4. Had 700 CSS files Had 1.9mb of CSS
- 5. Have to be an expert in the siteto modify or add
- 6. Each new addition to the site, the CSS grows
- 7. CSS re-use is almost non-existent
- 8. Code is fragile, have to be more specific to not break other peoples styling.CSS specificitybombs!
- 9. We make a 1:1 relationship of the CSS & the modules we create
- 10. How to get round it? OOCSS
- 11. Create your CSS like Lego blocks
- 12. Lego blocks can be used to make up many different unique structures from the same elements
- 13. Create a Component library http://oocss.org/ex/library.html
- 14. Separate container and content Break the dependency between the container module and the content
- 15. Build the HTML from the component library
- 16. Separate structure and skin Abstract the structure of the block from the skin which is being applied
- 17. Lego blocks first Design your individual pages only once you have all the lego blocks in front of you
- 18. 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!
- 19. Mix and match Container and content objects to achieve high performance design.
- 20. Never specify element DO: .class Don’t: div.class
- 21. Be Flexible Extensible height and width. Let the grid control the width and the content control the height.
- 22. Learn to love grids
- 23. Mark up and CSS become predictable & consistent
- 24. Photo credits http://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/
- 25. 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: andrew@andrewford.co.nz
Editor's Notes
- 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.