Не новый велосипед

"Всё что можно было придумать, уже придумано"

Суть заключается в простом пересмотрении некоторых 
аспектов и всего-то, некотором упрощении что-ли уже зарекомендовавших себя 
популярных методик.

Начнем.

Структура веб-страницы заключается в компоновке максимально независимых друг от друга модулей. Давайте перейдем на "темную сторону" и рассмотрим структуру подробнее.

  На первом рисунке показан общий упрощенный вид страницы, в моем понимании.

  Разобьем все  по слоям и рассмотрим каждый из них поближе. (Эту часть я 

  подхватил у методологий многослойного css и smacss)

  Слой 1 - Общий ( файл _base.scss )
  Базовые правила для страницы, никак не связанные с ее содержимым
  Правила для этого слоя:
    ▪ сбросы стилей ( normalize, reset, etc. );
    ▪ стили для общих элементов без классов и id ( html, body, a, ul, etc. );
    ▪ специфичные классы ( .clearfix, .left, .right ).

  Слой 2 -  Макет ( файл _layout.scss )
  Общий макет страницы. То что в голове рисуется при словах футер, левая колонка,
  сетка, контейнер и т.д.
  Правила для этого слоя:
    ▪ имя классов начинаются с префикса .l- ( l от layout );
    ▪ стили для общей разметки и сетки страницы ( .l-header, .l-col-12, .l-row,
      etc. ).

  Слой 3 -  Модули ( файл _module.scss )
  Описание стилей независимых модулей страницы.
  Правила для этого слоя:
    ▪ имя модуля состоящего из более чем 1-го слова разделяются
      символом тире "-" ( .reg-form, .shopping-cart, etc. );
    ▪ символом два нижних подчеркивания "__" обозначаются модификаторы,
      незначительные отличие модулей на  разных страницах сайта или на
      одной странице в разных местах. (.pager __main, .pager __catalog-page)

  Слой 4 -  Элементы ( не выносятся в отдельный файл )
  Описание стилей элементов страницы.
  Правила для этого слоя:
    ▪ имя имя элементов формируются из имени модуля +
      символ нижнее подчеркивание "_" ( .reg-form_button,
      .shopping-cart_cart ).

  Слой 5 - ( файл _state.scss )
  Для него нет визуального отображение
  Правила для этого слоя:
    ▪ тут располагаются @media queries
    ▪ и стили для состояний модулей или элементов страницы. Классы
      с префиксом .is- ( .is-disabled, .is-hidden, etc. )

Что касается файловой структуры то тут все выглядит так:

style.scss
_base.scss
_layout.scss
_module.scss
_state.scss

Файл style.scss импортирует в себя все слои по порядку. Благодаря символу нижнее подчеркивание в названии слоев, scss не компилирует их в отдельные файлы, а сразу все записывает в style.css