In 2020, if you are looking through some complicated front-end projects, It is pretty easy to see some kind of CSS pre-processor. I personally prefer to use SCSS among these pre-processors. At first I used to just drop some files in scss folder but when I started working on bit complicated projects, I faces problems where I was not able to maintain my CSS/SCSS code. Please note that My folder structure is heavily inspired from Jesse Showalter's video - Front-End Architecture. So, let's find out how I fixed my problem!
Folder Structure
/src
|
|- scss/
|
|- 00-tools/
|- 01-helpers/
|- 02-basic/
|- 03-layout/
|- 04-modules/
|- 05-pages
| |
| |- about/
|- app.scss
I divide my scss files into main 5 folders at top level: tools, helpers, basic, layout, modules and pages. I will dive into each folders in a minute. Beside these folders, I have app.scss file at the root level of scss folder. This app file imports all other scss files from all other folders. This way, I can point my bundler to this one file and it can import my whole SCSS code easily. Now let's dive into each folders deeply.
Now you might have a question that, why I am using numbers in-front of folder's name and it is a very good question. By adding numbers in the front, I will always see these folders in the order I mentioned. It helps me to imagine my folder structure easily and I can quickly decide that which file/code will go in which directory. These digits also represent the order in which they should be imported in the app.scss file. For example, you might have some basic styles under basic folder which you will be overriding for about page. In this case, digits really helps you to understand the order in which these files will/should be imported. Although There is not any particular reason for using two digits. It is something that I inherited from Jesse's video.
00-tools
This directory is the home for all SCSS tools or any third party CSS files you use in your project. Many developers uses (or used to) bourbon which adds several useful functions to your development environment. You should add such tools in this folder. This place is also a home for those css files that you downloaded for any third party libraries you are using in the project. I like to put reset.css file in this folder, this way it gets imported at very first in the app.scss and I can easily override the styles in other files.
01-helpers
It is pretty common to use separate files for your SCSS variables, functions and mixins. This directory is the place for those files. This is really helpful as you can find all of your SCSS related variables and functions in one place. You can make change in this folder which will be affected on all of your code. This is really helpful when you want to update some SCSS function. You do not need to go around your code to find the functions. I usually have three files in this folder: variables.scss, mixins.scss and functions.scss. I do not use functions and mixins heavily in my projects so you might not find those files in my projects but this folder will be really helpful while you are working on large project.
02-basic
This is the folder where the CSS code will start which will style your website. As the name describes, this folder holds all the basic CSS code for the website. It includes basic styles to tags like section, article , text related tags, grid system, etc. I like to separate the code in their individual files. For example, I create typography.scss file which holds all basic styles related to all text elements. I also create links.scss file if I have several different basic styles for the links on my website.
03-layout
Usually we have same styles for header and footer on all the pages of our website. In this case, it will be much better to isolate the CSS code for such elements in different file. If you are working on a large and complex web design, then you might find some sections on different pages that are either has same text and layout or some might just have the same layout for that section. In such case, I create SCSS file for that section in this folder. This way, I can find all of my code that is related to layout sections for my website.
04-modules
Layouts and modules folder does not have major difference except modules folder includes the small group of elements which get repeated through out the whole website. A good example for this folder would be a card which we will be using in different pages of the website. I usually create files for buttons, cards, carousal, gallery, etc. in this folder. Although I only add code for those modules which have been used at least two times on the website. If there is an element that is been used on only one page, then I would rather go with 05-pages folder as that folder contains code specific for that page.
05-pages
This is the place where we either override the CSS code written before for specific pages or we might add new code for that page only. If I need only one file for a page, than I create file with the page's name at the root level of this directory. Sometimes few pages requires more than one files and in that case, I create folder with page's name in the folder and add files inside that folder. This way we can easily identify the code for that page.
Now a question raises that how does the code will override the styles for that element on that page only? To resolve this issue, I used to create new classes which were pre-pended with the page's name. It was a working solution but it was not effective and it was not easy to understand. For that reason, I recently came up with a new way to resolve this issue. I create index.scss file in the page's folder. This file looks something like this:
// scss/05-pages/about/index.scss
body#about {
@import './carousal.scss';
}
As you can see, if you will import this index file in the app.scss file (according to the proper order), it will override the styles but only for the body which has id of about. This way you do not need to make too many changes to the mark up of the page. You can simply add id attribute to the page's body and css code will be applied to that page.
app.scss
This is the main entry file for all of your SCSS code. I import all the files created in above folders (index.scss for pages folder) in the proper order. If we create new file in any folder, you can just import that file in app.scss and this way it will add your new SCSS code to the build process. If you do not prefer or if you have too many files in each folder, the alternative for that situation will be to add index.scss files in each folder and import all the files from that folders to their respective index files. Then you can import those main index files to the app.scss. This way you will only have 5 lines of code in app.scss 🎉!
Conclusion
This folder structure helped me a lot to organize my CSS code for my websites. It might be over kill for some small projects but if you are working with some large or fairly complex project, this folder structure might be able to help you to organize your code. Again note that, you do not need to follow exactly same structure.
If you have better solution than this or if you have any tips to improve the performance for my folder structure, feel free to leave a comment down in the comment section. And do not forget to give like to this post if you like it! Thanks for reading this blog 🙇! If you want to learn more about how I structure my projects, subscribe to my YouTube Channel and you can ask my questions during live streams, yay!
Top comments (0)