oocss and smacss
TRANSCRIPT
- 1. OOCSS and SMACSS Rafael Ventura 1 / 24
- 2. HOW BROWSER RENDER 2 / 24
- 3. CLASSICAL PROBLEMS Repetitions Problems to maintain or scale Deep in the CSSOM Confuse 3 / 24
- 4. OOCSS Object Oriented CSS Single responsability Separation of concerns Separation of structure from skin Use of classes before Ids 4 / 24
- 5. Advantages Maintance Concise Reusable Semantic 5 / 24
- 6. SMACSS Created by Jonathan Snook Scalable and Modular Architecture for CSS Not a framework, more a style guide 6 / 24
- 7. BASE Defines the default styles of each elements Resets and normalizes belongs to here Frameworks too 7 / 24
- 8. BASE - Example 8 / 24
- 9. LAYOUT Big sections of the page Define header, sidebar, footers, etc... Can use IDs Recomends starts with l- 9 / 24
- 10. LAYOUT - Example 10 / 24
- 11. MODULE Components of site Will be reusables without breaking the site Can exist standalone Can contain childs or descendents 11 / 24
- 12. MODULE - Example 12 / 24
- 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. MODULE - SUBMODULES Use to fit the original model to a new generic context To battle against specificity 14 / 24
- 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. STATE - Example 16 / 24
- 17. WARNING States can use !important 17 / 24
- 18. THEME Are optional Serve to specific needs, specially cosmetic changes 18 / 24
- 19. TIPS - UTILS Classes that work with box model to align elements Refine your design 19 / 24
- 20. TIPS - ORDER TO WRITE Box Border Background Text Other 20 / 24
- 21. TIPS - BEM BLOCK ELEMENT MODIFY Example: list__item--star 21 / 24
- 22. DIDN'T LIKE SMACSS? Atomic Design Idiomatic CSS CSS Guidelines 22 / 24
- 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. THANKS 24 / 24