Upload
alex-meijer
View
126
Download
4
Tags:
Embed Size (px)
DESCRIPTION
Talk on OOCSS at Hogeschool Rotterdam (26 april 2013) during the MT Meetup #2. Full schedule: https://joind.in/event/view/1342
Citation preview
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