SMACSS

SMACSS — это методология организации кода Sass. Официальный сайт: https://smacss.com/

SMACSS можно использовать вместе с методологией Яндекса БЭМ.

Видеообзор обеих методологий и пример совместного использования: BEM (БЭМ) & SMACSS

Структура папок и файлов Sass проекта

Содержимое директории src/sсss:

├── base
│   ├── _base.scss
│   ├── _bootstrap.scss
│   └── _custom.scss
├── layout
│   ├── _home.scss
│   └── _second.scss
├── modules
│   ├── _footer.scss
│   ├── _header.scss
│   └── _navbar.scss
├── utilities
│   ├── _atomic.scss
│   └── _tech.scss
└── style.scss

В корне директории src/sсss находится файл style.scss, в котором подключаются файлы в требуемой последовательности:

// Base
@import "base/bootstrap"; // Bootstrap
@import "base/custom"; // Main variables of project
@import "base/base"; // Override main HTML styles

// Utilities
@import "utilities/atomic"; // Atomic CSS elements such as .center, .red, .margin-top-5 etc.
@import "utilities/tech"; // Technical styles for webmaster use only

// Modules — reusable, modular parts of our design:
@import "modules/header";
@import "modules/navbar";
@import "modules/footer";

// Layout
@import "layout/home";
@import "layout/second";

См. также

• Sass