OOCSS- 26 April 2013Alex Meijer
OO WHAT??Object Orientated Cascading StyleSheets
Nicole Sullivan (2011)Fronteers (Rijksmuseum)Redesign NOS.nl
"THERES A CLASS FOR THAT"
MANY ROADS LEAD TO ROME
PRINCIPLES OF OOCSSSeperation of Structure from SkinSeperation of Containers andContent
SEPERATION OF STRUCTUREFROM SKIN
SEPERATION OF CONTAINERSAND CONTENT
“When we use OOCSS’sclass-based module building,we ensure that our styles arenot dependent on anycontaining element. Thism...
ADVANTAGESReuse of css rules (faster & smallerfiles)Maintainable
HANDS ON!!!
TIPSPlan carefully!Avoid the descendent selector (.listli)HTML elements for styling (h1.title)Media Query modules, not pages
MISCONCEPTIONSPreprocessors == OOCSSCant use #idsBig projects/websites
READING...Scalable and Modular Architecturefor CSS - www.smacss.comOOCSS - http://oocss.org/inuit css - http://inuitcss.co...
QUESTIONS?@AmeijerNL
MT Meetup 2 - OOCSS
MT Meetup 2 - OOCSS
MT Meetup 2 - OOCSS
MT Meetup 2 - OOCSS
MT Meetup 2 - OOCSS
MT Meetup 2 - OOCSS
Upcoming SlideShare
Loading in …5
×

MT Meetup 2 - OOCSS

506 views

Published on

Talk on OOCSS at Hogeschool Rotterdam (26 april 2013) during the MT Meetup #2.

Full schedule: https://joind.in/event/view/1342

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
506
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

MT Meetup 2 - OOCSS

  1. 1. OOCSS- 26 April 2013Alex Meijer
  2. 2. OO WHAT??Object Orientated Cascading StyleSheets
  3. 3. Nicole Sullivan (2011)Fronteers (Rijksmuseum)Redesign NOS.nl
  4. 4. "THERES A CLASS FOR THAT"
  5. 5. MANY ROADS LEAD TO ROME
  6. 6. PRINCIPLES OF OOCSSSeperation of Structure from SkinSeperation of Containers andContent
  7. 7. SEPERATION OF STRUCTUREFROM SKIN
  8. 8. SEPERATION OF CONTAINERSAND CONTENT
  9. 9. “When we use OOCSS’sclass-based module building,we ensure that our styles arenot dependent on anycontaining element. Thismeans they can then bereused anywhere in thedocument, regardless ofstructural context.”
  10. 10. ADVANTAGESReuse of css rules (faster & smallerfiles)Maintainable
  11. 11. HANDS ON!!!
  12. 12. TIPSPlan carefully!Avoid the descendent selector (.listli)HTML elements for styling (h1.title)Media Query modules, not pages
  13. 13. MISCONCEPTIONSPreprocessors == OOCSSCant use #idsBig projects/websites
  14. 14. READING...Scalable and Modular Architecturefor CSS - www.smacss.comOOCSS - http://oocss.org/inuit css - http://inuitcss.com/Nicole Sullivan - @stubbornella
  15. 15. QUESTIONS?@AmeijerNL

×