CSS Architecture
1 like599 views
This document discusses best practices for CSS architecture and organization. It outlines ways to structure CSS code in an object-oriented way using techniques like atomic design, OOCSS, and SMACS. Folders should be organized with sections for variables, typography, utilities, objects, and more. Objects may include buttons, forms, icons, and layout components. Communication from designers to developers is important and can involve providing color palettes, spacing guidelines, and object details through images, pseudo code, or other documentation. Following these principles helps improve code quality, reuse, and maintainability.
CSS Architecture
- 1. CSS Architecture Doing it right
- 5. To whom is this?
- 6. • Doing it wrong. • Doing it right. • Communication.
- 8. Code Smells • Undoing styles. • Magic numbers. • Qualified selectors. • IDs. • !important.
- 10. • Content • Padding • Border • Margin
- 11. • Knows only about its inside. • Looks the same wherever it is put.
- 12. .form-inputs { . . . } ! .form-actions { .button { text-align: right; margin-left: 1rem; } }
- 13. .form-inputs { . . . } ! .form-actions { margin-top: 1rem; .button { text-align: right; margin-left: 1rem; } }
- 14. .form-actions { .button { text-align: right; margin-left: 1rem; } } ! .default-form .form-actions { margin-top: 1rem; } ! .vertical-form .form-actions { margin-top: 0.5rem; }
- 15. Doing it right
- 16. Things change
- 17. • Atomic Design. • OOCSS. • SMACS.
- 18. The GB way
- 19. No Frameworks
- 20. • Subscribe to other developers structure/naming/style. • Potential to bloat/unneeded stuff. • Ability to scale. • Framework conventions.
- 21. Tools
- 22. Folder Structure
- 24. • Variables. • Typography. • Utilities. • Objects.
- 25. Objects • Buttons. • Forms. • Icons. • Layouts. • Lists. • Containers.
- 30. Communication
- 31. How is design communicated to you?
- 32. • Colours. • Sizes. • Spacing. • Meanings. • Relations.
- 33. Design to Dev
- 34. • Object image + excel with meta info. • Pseudo CSS.
- 35. Dev to Dev / Design
- 37. Disadvantages?
- 38. Summary • Take the time to learn. • Improve.
- 39. @gabrielgpoca