CSS Sanity with Sass: The Inverted Triangle Approach
1 like1,187 views
The document discusses the inverted triangle approach for organizing CSS and SASS code, emphasizing the importance of maintaining clarity and structure in stylesheets. It introduces different layers such as settings, generic styles, elements, and components, highlighting the hierarchical organization of code. The author provides resources for further reading and invites questions.
CSS Sanity with Sass: The Inverted Triangle Approach
- 1. THE INVERTED TRIANGLE APPROACH C S S S A N I T Y W I T H S A S S
- 2. CSS - CASCADING STYLE SHEETS
- 3. SASS • Nested styles • Variables • Calculations • Mixins
- 4. SASS CODE
- 7. THIS IS NOT MY IDEA TO B E C L E A R …
- 8. INVERTED TRIANGLE O RG A N I Z E YO U R C O D E
- 9. KEY METRICS I N V E RT E D T R I A N G L E
- 10. INVERTED TRIANGLE O RG A N I Z E YO U R C O D E
- 11. SETTINGS • Global settings • Base font size • Color palettes • Config
- 12. TOOLS • Still global • Mixins • Font-sizing • Gradients • Functions
- 13. GENERIC • First layer to actually produce CSS • Normalize • Reset • Box-sizing rules
- 14. ELEMENTS • Unclassed HTML elements • Very rarely changed once set up
- 15. OBJECTS • First layer of class-based selectors • Non-cosmetic objects • Wrappers • Media objects
- 16. SET IT AND FORGET IT E V E RY T H I N G B E F O R E T H I S
- 17. COMPONENTS • Bulk of work is done here • Class-based styles • Split into partials to keep organized
- 18. TRUMPS • Overrides everything that came before • Where !important goes when necessary
- 19. TA K E T WO “They get messy.”
- 20. MY INVERTED TRIANGLE STRUCTURE • a — settings • b-tools • c-generic • d-elements • e-objects • f-components • g-vendors • h-trumps code
- 21. RESOURCES • http://technotif.com/manage-large-css-projects-with-itcss/ • https://www.sitepoint.com/architecture-in-sass/ • https://www.packtpub.com/books/content/how-structure- your-sass-scalability-using-itcss • https://github.com/JulieKuehl/Forward-Framework/tree/ kanopi/src/scss/forward
- 22. THANK YOU! QUESTIONS? J U L I E @ J U L I E K U E H L . C O M @ J U L I E K U E H L http://juliekuehl.com/wordcamp-seattle-2016/