Use of SASS partials instead of one big sass file
Introduction
Use SASS partials to organize your CSS into logical manageable chunks.
Decision
Partials should be used to organize stylesheets to make things more modular and easier to maintain.
Example:
// main.scss
@import "01-base/_all";
@import "00-starter/_all";
@import "02-atoms/_all";
@import "03-molecules/_all";
@import "04-organisms/_all";
@import "05-layouts/_all";
@import "06-misc/_all";
Context
The larger a stylesheet grows, the harder it is to maintain. By splitting large stylesheets into smaller chunks, it allows codebases to become more maintainable in the long run because things are easier to find, and the smaller focused files are easier to read and understand.
Consequences
- The potential for overuse: There is a risk of overusing partials, which can lead to too many small files, making the project structure overly complex and difficult to manage.
Exceptions
- Legacy code: If a project is not using SASS partials, it might be beneficial to stick with the current structure, since it could be a massive undertaking to change everything.
- Small codebases: For smaller projects like a single-page site, the overhead of creating and maintaining multiple SASS partials might not be worth it. A single stylesheet might be more efficient.