THE INVERTED TRIANGLE APPROACHC S S S A N I T Y W I T H S A S S
CSS - CASCADING STYLE SHEETS
THIS IS NOT MY IDEAT O B E C L E A R…
INVERTED TRIANGLEO R G A N I Z E Y O U R C O D E
KEY METRICSI N V E R T E D T R I A N G L E
INVERTED TRIANGLEO R G A N I Z E Y O U R C O D E
GENERIC
• First layer to actually produce CSS
• Normalize
• Reset
• Box-sizing rules
ELEMENTS
• Unclassed HTML elements
• Very rarely changed once set up
OBJECTS
• First layer of class-based selectors
• Non-cosmetic objects
• Wrappers
• Media objects
SET IT AND FORGET ITE V E R Y T H I N G B E F O R E T H I S
COMPONENTS
• Bulk of work is done here
• Class-based styles
• Split into partials to keep organized
TRUMPS
• Overrides everything that came before
• Where !important goes when necessary
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
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/