“Organizing is what you do before you do something so that when you do it, it is not all mixed up.” — A. A. Milne
Keeping things organised is a good idea at all times. It may be daily activities, codebase, etc. There are several benefits to having things ordered. It is stress-free maintenance to put it simply. It is excellent practice for front-end developers to organise their codebase, It makes their codes easier to read and understand.
We will be highlighting organisation as it Pertains to sass. An effective way to structure sass is using the 7-1 pattern(7 folders, 1 file). It is a simple and easy pattern. It is a widely adopted document structure that serves as a basis for large projects.
What is SASS?
Sass stands for Syntactically Awesome Stylesheet. Sass is a preprocessor scripting language that is interpreted or complied into Cascading Style Sheets.
In this 7-1 sass architecture pattern, partials are organised into 7 different folders and compiled into a single file (main.scss).
Below is an illustration of a 7-1 directory and examples of files that each folder would contain.
The contents contained in each folder include;
Abstracts/Utilities
This folder contains variables, functions, mixins, and other config files. they are the helpers for other folders and they do not compile to CSS.
Base
The base folder is like a foundation of the project, it contains the boilerplate code for the project. it includes reset, typographic rules, and standard styles which are used throughout your project.
Components
Contains styles that are reusables(buttons, forms, sliders, etc.). most projects contain a lot of component files as these make up a site/app.
Layout
This folder contains styles for different aspects of your project such as navbars, headers, footers etc.
Pages
Contains page-specific styles. It can be an individual page or a set of pages.
Themes
Hold files that create project-specific themes, this is used whenever a site has multiple themes.
Vendors
Contains any third-party styles. It could be frameworks or libraries such as bootstrap, JQuery UI, etc. in some cases there may be a need to override vendor codes to suit our theme or style.
Main.scss
This is where all files are imported.
In conclusion better productivity results from good architecture and code standards. Keep things simple and easy to understand.