OOCSS - 26 April 2013Alex Meijer

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

QUESTIONS?@AmeijerNL