Talk I gave for the Design team at MercadoLibre.

1. An Introduction to Object Oriented CSS
Scalable and Maintainable Stylesheets
Nati Devalle - @Taly
UX Designer

2. Starting a project from scratch

4. 6 months later...

6. WHY?

7. We keep piling styles up

8. instead of reusing them

9. Where do we start?
http://www.flickr.com/photos/mrlemming_photos/5750248841/

10. Object
Oriented
CSS
by Nicole Sullivan

11. 2 Principles
1. Separation of Structure from Skin
2. Separation of Containers from Content

12. 2 Principles
1. Separation of Structure from Skin
2. Separation of Containers from Content

15. Structure Skin

16. Structure Skin

17. Scalable
.ch-box-error {}
.ch-box-attention {}

18. Scalable
.ch-box-error {}
.ch-box-attention {}
.ch-box-help {}
.ch-box-information {}
.ch-box-ok {}

19. Maintainable
[class*='ch-box'] {
border-radius: 5px;
padding: 10px;
margin: 0 0 10px 0;
}

20. Maintainable
[class*='ch-box'] {
border-radius: 20px;
padding: 10px;
margin: 0 0 10px 0;
}

21. 2 Principles
1. Separation of Structure from Skin
2. Separation of Containers from Content

22. What’s Content?

24. What’s Container?

25. http://www.html5code.com/tutorials/html5-semantic-layout-tags/

26. Break the dependency
between content and container
(So you can put the content in different containers)

27. Use styles that are
specific to an element
and
don’t depend on location

30. The Recipe
1. Identify the pattern
2. Create a component library
3. Extend it
http://www.flickr.com/photos/mlazarevski/8108416027/sizes/l/in/photostre

32. What’s
The
Pattern?

34. How did we code this?

35. How did we code this?

36. How did we code this?

39. Pattern = Reusable
(and consistency)

40. Create a component

44. Extend

49. Too similar?
Choose one!

50. Extend more

51. Exceptions

54. Not bad

55. But it is really necessary?

56. Today
7 badges
Saved 18+ repeated declarations

61. 20 badges
Saved 57+ repeated declarations

63. And that’s just ONE pattern

64. Think of all the others we can find
http://www.flickr.com/photos/bdesham/2432400623/in/photostream/

66. and this

67. and thiscould be just this

68. Success!

70. This could be very tempting...

71. But what if it changes?

73. Future-proof

74. Don’t forget about semantics
Embrace Semantics

75. To sum it up...

76. If you have to copy and paste
just one single CSS declaration...

78. ( Tweet me at @Taly )

79. ● http://oocss.org/
● http://www.slideshare.net/stubbornella/object-oriented-css
● http://www.slideshare.net/stubbornella/what-is-object-oriented-css
● https://www.youtube.com/watch?v=EW8NAFELWzo
● http://www.stubbornella.org/content/2010/06/25/the-media-object-
saves-hundreds-of-lines-of-code/
● http://www.slideshare.net/stubbornella/5-mistakes-of-massive-css
● http://www.lukew.com/ff/entry.asp?1049
● http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-
object-oriented-css-oocss/
● http://www.sitepoint.com/css-architectures-scalable-and-modular-
approaches/
● https://www.google.com.ar/search?q=OOCSS
Resources