An Introduction to Object Oriented CSS

1,283 views
1,208 views

Published on

Talk I gave for the Design team at MercadoLibre.

Published in: Design, Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,283
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
20
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

An Introduction to Object Oriented CSS

  1. 1. An Introduction to Object Oriented CSS Scalable and Maintainable Stylesheets Nati Devalle - @Taly UX Designer
  2. 2. Starting a project from scratch
  3. 3. 6 months later...
  4. 4. WHY?
  5. 5. We keep piling styles up
  6. 6. instead of reusing them
  7. 7. Where do we start? http://www.flickr.com/photos/mrlemming_photos/5750248841/
  8. 8. Object Oriented CSS by Nicole Sullivan
  9. 9. 2 Principles 1. Separation of Structure from Skin 2. Separation of Containers from Content
  10. 10. 2 Principles 1. Separation of Structure from Skin 2. Separation of Containers from Content
  11. 11. Structure Skin
  12. 12. Structure Skin
  13. 13. Scalable .ch-box-error {} .ch-box-attention {}
  14. 14. Scalable .ch-box-error {} .ch-box-attention {} .ch-box-help {} .ch-box-information {} .ch-box-ok {}
  15. 15. Maintainable [class*='ch-box'] { border-radius: 5px; padding: 10px; margin: 0 0 10px 0; }
  16. 16. Maintainable [class*='ch-box'] { border-radius: 20px; padding: 10px; margin: 0 0 10px 0; }
  17. 17. 2 Principles 1. Separation of Structure from Skin 2. Separation of Containers from Content
  18. 18. What’s Content?
  19. 19. What’s Container?
  20. 20. http://www.html5code.com/tutorials/html5-semantic-layout-tags/
  21. 21. Break the dependency between content and container (So you can put the content in different containers)
  22. 22. Use styles that are specific to an element and don’t depend on location
  23. 23. 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
  24. 24. What’s The Pattern?
  25. 25. How did we code this?
  26. 26. How did we code this?
  27. 27. How did we code this?
  28. 28. Pattern = Reusable (and consistency)
  29. 29. Create a component
  30. 30. Extend
  31. 31. Too similar? Choose one!
  32. 32. Extend more
  33. 33. Exceptions
  34. 34. Not bad
  35. 35. But it is really necessary?
  36. 36. Today 7 badges Saved 18+ repeated declarations
  37. 37. 20 badges Saved 57+ repeated declarations
  38. 38. And that’s just ONE pattern
  39. 39. Think of all the others we can find http://www.flickr.com/photos/bdesham/2432400623/in/photostream/
  40. 40. and this
  41. 41. and thiscould be just this
  42. 42. Success!
  43. 43. This could be very tempting...
  44. 44. But what if it changes?
  45. 45. Future-proof
  46. 46. Don’t forget about semantics Embrace Semantics
  47. 47. To sum it up...
  48. 48. If you have to copy and paste just one single CSS declaration...
  49. 49. ( Tweet me at @Taly )
  50. 50. ● 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

×