You always start with the best of intentions. The parent/starter theme you begin your custom site with has a beautifully laid out style.css file. You do your best to keep everything organized and logical, but in the throes of deadlines and CSS frustrations things get ugly. Maybe you’ve heard of Sass and don’t know how to begin. Maybe you’ve used Sass and aren’t quite seeing the light yet. We’ll go over how to begin with Sass and how to use the Inverted Triangle way of organizing Sass to help you keep your sanity throughout the entire project.

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

6. “They get messy.”

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/