CSS planning is vital

SASS Project Structure for Big Projects

Danny Huang
Apr 9, 2018 · 2 min read

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.

Small Projects

_layout.scss
_component.scss
_base.scss
main.scss

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.

Bigger Projects

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.

  • base/
  • components/
  • layout/
  • pages/
  • themes/
  • abstracts/
  • vendors/
  • main.scss

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.

Conclusion

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.

Resource: