CSS Sanity with Sass and the Inverted Triangle Approach

THE INVERTED TRIANGLE APPROACHC S S S A N I T Y W I T H S A S S

CSS - CASCADING STYLE SHEETS

SASS

• Nested styles

• Variables

• Calculations

• Mixins

SASS CODE

“They get messy.”

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

SETTINGS

• Global settings

• Base font size

• Color palettes

• Config

TOOLS

• Still global

• Mixins

• Font-sizing

• Gradients

• Functions

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

T A K E T W O

“They get messy.”

MY INVERTED TRIANGLE STRUCTURE

• a — settings

• b-tools

• c-generic

• d-elements

• e-objects

• f-components

• g-vendors

• h-trumps

code

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-milwaukee-2016/