5 useful methods on how to organize SASS files for large projects

Organising SASS files in a large project can be a real pain. If not properly organized, you will experience a lot of pain later in the project when you need to change or redo stuff. So, how do we organize SASS files? There is no only method but I have seem some examples that serve as good references for your own organization. You can copy them directly or tweak them to suit your own coding needs. These are by no means comprehensive but they can point out some useful directions in terms of SASS files organization for a big project.

Method #1: SMACSS, OOCSS and BEM

how to organize sass files 1

For this method, the creator refines modules as any reusable element in the project. Basically, he defines many of the global modules and uses page specific modifiers for any of the modules he want to use on a particular page. This method saves him a lot of code writing for each individual page.

Method #2: views, scripts and stylesheets

how to organize sass files 2 how to organize sass files 2-1

This method follows more of the convention views and scripts approach. I have screenshoted the definitions of the terms so that you can understand what they mean.

 

Method #3: Following referral.com

how to organize sass files 3

 

This was how the SASS files are organized on referral.com. It is another example you can use for more complex sites.

 

Method #4: For wordpress themes

how to organize sass files 4

This is an approach that combines OOCSS principles and the Inuit.css framework. The example was specifically for a wordpress theme development so if you are working on that, this example might be more relevant for you.

 

Method #5: SMACSS-style

how to organize sass files 5

Abstracting the files out in a SMACSS structure is another good method used by its creator. This approach is fairly extendable as you can add or subtract sub modules from the main module drop down.

 

I hope these methods and examples can provide you with a good way to organize your SASS files in a large project.

Leave a comment

Your email address will not be published.