This template is based on the idea's from Harry Roberts ITCSS methodology. A sane, scalable, managed CSS architecture from CSS Wizardry.
More info: http://itcss.io/
Watch this first (20 min): https://youtu.be/1OKZOV-iLj4?t=6m44s
ITCSS is based on how sculptors work
-
Blast some rock out of a quarry (Generic)
-
Cut it down into a large block (Base)
-
Rough it into a general shape (Objects)
-
Begin adding features (Components)
-
Add fine details (Trumps)
01-Settings: Global variables, config switches
02-Tools: Default mixins and functions
03-Generic: Ground-zero styles (Normalize.css, resets, box-sizing)
04-Base: Unclassed HTML elements (type selectors)
05-Objects: Cosmetic-free design patterns
06-Components: Designed components, chunks of UI
07-Trumps: Helpers and overrides