OO WHAT??Object Orientated Cascading Style
Sheets
Nicole Sullivan (2011)Fronteers (Rijksmuseum)Redesign NOS.nl
"THERE'S 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 are
not dependent on anycontaining element. Thismeans they can then bereused anywhere in thedocument, regardless of
structural context.”
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 == OOCSSCan't use #idsBig projects/websites
READING...Scalable and Modular Architecturefor CSS - www.smacss.comOOCSS - http://oocss.org/inuit css - http://inuitcss.com/Nicole Sullivan - @stubbornella