The document is a presentation about Object Oriented CSS (OOCSS). It discusses two major OOCSS principles: 1) Separating structure and skin and 2) Separating container and content. This allows websites to be built in a modular way using "Legos" of HTML, CSS, images and JavaScript that can be reused across a site. Following OOCSS principles results in faster sites with less CSS and happier users, developers, and clients. The presentation provides examples of OOCSS code and tips for implementation.

1. HTML AND CSS
Let’s all make fast sites
Presentation about OOCSS inspired by Nicole Sullivan. Flickr photo © Legoagogo

2. O Hai! I’m Yoni
Yoni De Beule, http://www.yonidebeule.be, @yoniweb

3. I work at Netlash
among others.
http://www.netlash.com http://www.minify.be http://www.vlmbuzz.be http://www.wrappp.it

4. I love building websites that are beautiful,
accessible, easy to use and fast.
I love building websites that are beautiful, accessible, easy to use and fast.

5. Beautiful
Beautiful sites

6. Accessible
Accessible sites (http://www.slideshare.net/YoniWeb/anysurfer)

7. Easy to use
Easy to use sites (love your Information Architectsʼs)

8. Fast
Fast sites

9. I also love using pictures in my
presentations...
I also love using pictures in my presentations...

10. It’s a designer thing
Itʼs a designer thing

11. I’m here today to make you happy.
Iʼm here today to make you happy.

12. I’ll be making users happy
Iʼll be making users happy

13. I’ll be making developers happy
Iʼll be making developers happy

14. I’ll be making clients happy
Iʼll be making clients happy

15. I’ll even be making myself happy
Iʼll even be making myself happy

16. I’m here to make you happy by telling you
about Object Oriented CSS.
Iʼm here to make you happy by telling you about Object Oriented CSS.

17. Nicole Sullivan
Thanks to Nicole Sullivan (Yahoo!) I found out about OOCSS © Marien van Os

18. She’s awesome.
Sheʼs awesome.

19. Pure WIN.
Pure WIN.

20. WHAT?
Object Oriented CSS
What is OOCSS?

21. OOCSS is all about building big websites
that are fast.
OOCSS is all about building big websites that are fast. Thereʼs a framework, but Iʼm all for the “concept”, the “idea”, the brilliance.

22. Two major principles
Two major principles

23. Two major principles
1. Separate structure and skin
Separate structure and skin

24. Two major principles
1. Separate structure and skin
2. Separate container and content
Separate container and content

25. Two major principles
1. Separate structure and skin
2. Separate container and content

26. Doesn’t that kind of sounds like ...
Doesnʼt that kind of sounds like ...

27. Fork?

28. Fork

29. Yeah, that’s what I thought.
Yeah, thatʼs what I thought.

30. WHY USE IT?
Object Oriented CSS
Why use OOCSS?

31. Lego’s.
Legoʼs.

32. That’s right.
Thatʼs right.

34. Lego’s.
Legoʼs are modular blocks of html, css, images and javascript that can be used all across a site.

35. Lego’s
1. Separate structure and skin
2. Separate container and content
They follow the OOCSS principles.

36. Fast site with less CSS.
Fast site with less CSS.

37. Users happy
Users happy

38. Developers can use these lego’s virtually
anywhere without the help of a designer.
Developers can use these legoʼs virtually anywhere without the help of a designer.

39. Developers happy
Developers happy

40. Less design time needed and faster new
features.
Less design time needed and faster new features.

41. Clients happy
Clients happy

42. Consistent design = clean code = fast site
And last but not least consistent design = clean code = fast site.

43. Yoni happy
Yoni and all the other designers Happy

44. Designers happy
Happy times.

45. HOW?
Object Oriented CSS
How do you use OOCSS?

46. Lego’s?
How do you use these Legoʼs?

47. <div class="mod">
<div class="inner">
<div class="hd">
<h3>Title</h3>
</div>
<div class="bd content">
<p>Content</p>
</div>
</div>
</div>
Notice the content class devs! Use it!

48. <div id="blogRecentArticlesListWidget" class="mod article">
<div class="inner">
<div class="hd">
<h3>Recent articles</h3>
</div>
<div class="bd content">
<ul>
<li><a href= "#" >Lorem ipsum</a></li>
</ul>
</div>
<div class="ft">
<p><a href= "#" >Blog archive</a></p>
</div>
</div>
</div>
Example from the new Fork CMS.

49. Use it and make it your own
but make it understandable.
Use it, try it, make it your own. Donʼt let my code or the framework hold you back!

50. PRO TIPS
Object Oriented CSS
Iʼve been using it for a while and want to hand out some very very specific “pro tips”.

51. Names, don’t loose yourself in them.
Stop using “general” names like “extraColumn” and “noticeBox”... Tell it like it is!

52. Respect the design, don’t worship it.
Respect the design, donʼt worship it.

53. Sprites rule, but are a bitch to maintain
so beware!
Sprites help, but are a bitch to maintain. I might do a presentation about this later (like why the new Ruby feature is a bad idea). {OFF TOPIC}

54. Progressive enhancement (PNG8).
Fireworks! *pew* *pew* {OFF TOPIC}

55. Questions?
Questions?

56. http://www.yonidebeule.be
Yoni De Beule, http://www.yonidebeule.be, @yoniweb