Image for post
Image for post
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


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.


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.


Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store