1. 1. OOCSS and SMACSS Rafael Ventura 1 / 24
2. 2. HOW BROWSER RENDER 2 / 24
3. 3. CLASSICAL PROBLEMS Repetitions Problems to maintain or scale Deep in the CSSOM Confuse 3 / 24
4. 4. OOCSS Object Oriented CSS Single responsability Separation of concerns Separation of structure from skin Use of classes before Ids 4 / 24
5. 5. Advantages Maintance Concise Reusable Semantic 5 / 24
6. 6. SMACSS Created by Jonathan Snook Scalable and Modular Architecture for CSS Not a framework, more a style guide 6 / 24
7. 7. BASE Defines the default styles of each elements Resets and normalizes belongs to here Frameworks too 7 / 24
8. 8. BASE - Example 8 / 24
9. 9. LAYOUT Big sections of the page Define header, sidebar, footers, etc... Can use IDs Recomends starts with l- 9 / 24
10. 10. LAYOUT - Example 10 / 24
11. 11. MODULE Components of site Will be reusables without breaking the site Can exist standalone Can contain childs or descendents 11 / 24
12. 12. MODULE - Example 12 / 24
13. 13. Warning about using element selectors Element selectors should be only used when the style applyed will be the same every time 13 / 24
14. 14. MODULE - SUBMODULES Use to fit the original model to a new generic context To battle against specificity 14 / 24
15. 15. STATE Override specific styles Can be applyed in layouts or modules State can indicate a Javascript dependency Usualy starts with is 15 / 24
16. 16. STATE - Example 16 / 24
17. 17. WARNING States can use !important 17 / 24
18. 18. THEME Are optional Serve to specific needs, specially cosmetic changes 18 / 24
19. 19. TIPS - UTILS Classes that work with box model to align elements Refine your design 19 / 24
20. 20. TIPS - ORDER TO WRITE Box Border Background Text Other 20 / 24
21. 21. TIPS - BEM BLOCK ELEMENT MODIFY Example: list__item--star 21 / 24
22. 22. DIDN'T LIKE SMACSS? Atomic Design Idiomatic CSS CSS Guidelines 22 / 24
23. 23. REFERENCES: https://github.com/stubbornella/oocss/wiki https://smacss.com/ http://www.smashingmagazine.com/2011/12/12/an- introduction-to-object-oriented-css-oocss/ https://en.bem.info/ 23 / 24
24. 24. THANKS 24 / 24