CSS is a fairly easy language to learn and start writing. However, because of its lack of structure and easiness to write. When the project becomes larger, maintaining CSS become very painful and unbearable.
Even with the help of preprocessors such as SASS, we still need to have a file structure. Therefore having a plan for your CSS is vital. There are many types of file structure online.
Today I want to share with you 2 different structure that I use. One I use for smaller projects and One I use for bigger projects.
This is the file structure that I use for smaller projects. By small project, I mean like a single web page. The great thing about this structure is that this is extendable. I can easily convert this structure into a more complex structure.
Let me explain what each of these files does.
Base file is where I have the resets, variables, mixins, and some utility CSS classes. It may look like there is a lot to fit in a single file. However, some of these subsets may only have less than 20 lines, some subsets may not even have any code.
Component file is for components such as buttons, navbars, cards, anything that is reusable. Since we have a small project our component file should be manageable.
Layout File handles the overall layout of the web page such as container and grid systems.
Main File does only one thing which is to import all the above files.
For a bigger project, multiple page app, I use 7–1 pattern, it is similar to the small project file structure but with more folders. Here’s what 7–1 the pattern looks like.
The base, components, and layout do the same job as the file structure above. However, instead of a single file, we now manage them in a folder.
Base: animations, base, typography, and utilies.
Components: have a single scss file for each individual component
Layout: Header, footer, grid, navigation
Pages: Have a single scss for each specific page
Themes: deals with various themes (optional, I haven’t use it yet)
Abstracts: handles function, mixins, and variables
Vendor: handles 3rd party css
Here’s a boilerplate from the original author.
sass-boilerplate - A boilerplate for Sass projects using the 7-1 architecture pattern from Sass Guidelines.
Well, that’s it. There are various ways and opinion on file structure. There is no right or wrong way. Hopefully, You have a better understanding of how to structure your CSS files and how to manage small and big projects.
- Sass Guidelines: https://sass-guidelin.es/