A set of example SCSS files which summarize the "components-patterns-views" CSS architecture paradigm outlined in this article from thoughtbot: https://robots.thoughtbot.com/architecting-front-end-styles

base.scss

//  WHAT GOES IN THIS FILE:
// 
//    - Raw HTML elements (no classes)
//    - Any non-rendering SASS (i.e. mixins and functions)
//
//  EXAMPLES:

body { }
a { }
p { }

@mixin button {
  background: #fff;
  border-radius: 4px;
}

components.scss

//  WHAT GOES IN THIS FILE:
//
//    - Singular modular items
//    - Often shared global components
//    - May have a state modifier
//    - NO parent-child relationships
//        • test question: "Does this object's styling depend on its context?"
//        • If the answer is "no", it goes here 
// 
//  EXAMPLES:

.alert { }
.subheader { }
.badge { }

.button { }
.button--disabled { }

patterns.scss

//  WHAT GOES IN THIS FILE:
// 
//    - Objects that have children, whom are affected by their context
//    - Elaborations on styles previously defined in 'components.scss'
//    - Patterns may also have modifier states that affect structure or appearance
//
//  EXAMPLES:

.hero-header { }
.hero-header__title { }
.hero-header__description { }

.hero-header--faded { }
.hero-header--faded__title { }
.hero-header--faded__description { }


.hero-header .badge {/*
  While using selectors like this (to modify previously defined components) will
  technically work, sticking to BEM-style class names whenever possible is recommended
*/}

views.scss

//  WHAT GOES IN THIS FILE:
// 
//    - Ideally, this file would stay empty forever
//        • There should be no case-specific deviations to your design
//          system, but this is reality
//    - Definitions here are so sepcific that it is nonsensical or even
//      destructive to try to abstract them into a pattern
//    - Instead of giving a set of components a state modifier (e.g. "--homepage"),
//      put those components here
//    - Allows for overly-specific code to be more easily identified,
//      refactored, and eventually destroyed
//    - Storing necessary styles here protects components from having
//      so many modified states that they become meaningless
//
//  EXAMPLES:

.homepage {
  
  .hero-header { }
  .hero-header__title { }
  .hero-header__description { }

}