CSS/SCSS Partial Structuring (ITCSS)

styles.scss

// USE ITCSS FOR PARTIAL STRUCTURING

// SETTINGS
// Global variables, site-wide settings, config switches, etc.

// TOOLS
// Site-wide mixins and functions.

// GENERIC
// Low-specificity, far-reaching rulesets (e.g. resets).

// BASE
// Unclassed HTML elements (e.g. a {}, blockquote {}, address {}).

// OBJECTS
// Objects, abstractions, and design patterns (e.g. .media {}).

// COMPONENTS
// Discrete, complete chunks of UI (e.g. .carousel {}).

// HELPERS
// High-specificity, very explicit selectors.
// Overrides and helper classes (e.g. .hidden {}).