SASS – How to organize your “CSS”?

Recently I was thinking on how to organize my CSS in a better way. It looks like I tend to take different approach in each project. Do you feel the same? Well I decided to standardize it somehow. I start searching the Internet and then I found this blog post splitting SASS in to 7 folders representing different entities, in which each entity would have its own file and then be “registered” in all.sass import file (each folder would have one of those).

I loved it! This approach is pretty clean and gives us the opportunity to write SASS/CSS in a very modular way.

Basic SASS file structure:

• _base.sass — contains all the resets, variables, mixins, and utility classes
• _layout.sass — all the Sass code handling the layout, which is the container and grid systems
• _components.sass — everything that is reusable – buttons, navbars, cards, and so on
• _main.sass — the main partial should contain only the imports of the already mentioned files

Another example of the same simple structure is the following:

• _core.sass — contains variables, resets, mixins, and other similar styles
• _layout.sass — there are the styles for the header, footer, the grid system, etc
• _components.sass — styles for every component necessary for that project, including buttons, modals, etc.
• _app.sass — imports

Modular SASS folder tree structure :

This modular structure is recommended for larger projects. In this concept each component like button, slider or navbar would be contained in its own SASS file and then registered in all.sass import file for that folder.

sass/
|
|- abstracts/
|  |- _all.sass           // folder register/import file
|  |- _mixins.sass        // Sass Mixins Folder
|  |- _variables.sass     // Sass Variables
|
|- core/
|  |- _all.sass
|  |- _reset.sass         // Reset
|  |- _typography.sass    // Typography Rules
|
|- components/
|  |- _all.sass
|  |- _buttons.sass       // Buttons
|  |- _carousel.sass      // Carousel
|  |- _slider.sass        // Slider
|
|- layout/
|  |- _all.sass
|  |- _navigation.sass    // Navigation
|  |- _header.sass        // Header
|  |- _footer.sass        // Footer
|  |- _sidebar.sass       // Sidebar
|  |- _grid.sass          // Grid
|
|- pages/
|  |- _all.sass
|  |- _home.sass          // Home styles
|  |- _about.sass         // About styles
|
|- sections/ (or blocks/)
|  |- _all.sass
|  |- _hero.sass          // Hero section
|  |- _cta.sass           // CTA section
|
|- vendors/ (if needed)
|  |- _bootstrap.sass     // Bootstrap
|
- app.sass                // Main Sass file

File: app.sass (our main SASS file)

// Abstract files
@import "abscracts/all";

// Vendor Files
@import "vendor/bootstrap.scss";

// Core files
@import "core/all";

// Components
@import "components/all";

// Layout
@import "layout/all";

// Sections
@import "sections/all";

// Pages
@import "pages/all";

Final Words

Organizing code is essential for developers and together with all other skills, it is the most effective way to improve the functioning of the site. And even though there are multiple ways of organisation and different strategies, opting for simplicity helps you avoid the dangerous pitfalls. And finally, there is no right or wrong choice since everything depends on the developer’s work strategies.

https://www.webdesignerdepot.com/2020/12/2-smartest-ways-to-structure-sass/