Talk on OOCSS at Hogeschool Rotterdam (26 april 2013) during the MT Meetup #2. Full schedule: https://joind.in/event/view/1342

1. OOCSS- 26 April 2013Alex Meijer

2. OO WHAT??
Object Orientated Cascading Style
Sheets

3. Nicole Sullivan (2011)
Fronteers (Rijksmuseum)
Redesign NOS.nl

4. "THERE'S A CLASS FOR THAT"

5. MANY ROADS LEAD TO ROME

6. PRINCIPLES OF OOCSS
Seperation of Structure from Skin
Seperation of Containers and
Content

7. SEPERATION OF STRUCTURE
FROM SKIN

10. SEPERATION OF CONTAINERS
AND CONTENT

12. “When we use OOCSS’s
class-based module building,
we ensure that our styles are
not dependent on any
containing element. This
means they can then be
reused anywhere in the
document, regardless of
structural context.”

14. ADVANTAGES
Reuse of css rules (faster & smaller
files)
Maintainable

15. HANDS ON!!!

18. TIPS
Plan carefully!
Avoid the descendent selector (.list
li)
HTML elements for styling (h1.title)
Media Query modules, not pages

19. MISCONCEPTIONS
Preprocessors == OOCSS
Can't use #ids
Big projects/websites

20. READING...
Scalable and Modular Architecture
for CSS - www.smacss.com
OOCSS - http://oocss.org/
inuit css - http://inuitcss.com/
Nicole Sullivan - @stubbornella

21. QUESTIONS?
@AmeijerNL