How to Structure Your Modular Sass Files

One of my favorite features of Sass is how easy it is to split up my CSS and organize my styles. This is so useful, especially for large projects that need a lot of maintenance.

Sass makes it easy to split up your files and compile them into one large css file for deployment. This is much more efficient than importing a bunch of CSS files on page load. It may also speed up your website since it eliminates multiple calls to the server.

How Should You Break Up Your Files?

Well, it depends. For small projects you may be able to get away with only one sass file.

However, I usually have at least 3 for all projects.

Small Projects

  1. Reset

    Removes all default browser styles. Resets margins, padding, list styles, etc.

  2. Mixins

    This file contains any variables, mixins, and sass extensions that I am going to use.

  3. General

    All the sass styles for the site.

For most projects the general sass file will become long and difficult to maintain. For all but the tiniest one page projects I will add the following files and leave only basic, global styles in the general file.

Medium Projects

  1. Reset

    Removes all default browser styles. Resets margins, padding, list styles, etc.

  2. Mixins

    This file contains any variables, mixins, and sass extensions that I am going to use.

  3. General

    All the sass styles for the site.

  4. Header

    This will usually contain site branding and main navigation styles

  5. Main Content

    Put any styles for content that is not in the header or footer in this file.

  6. Footer

    All footer styles go in this file

  7. Forms

    Forms have so many different elements that they usually require their own sass file.

For large one page sites and multipage sites and themes I will have a lot more files. Generally I will break up any file that starts to require a lot of scrolling. Any file over 200 lines should be broken into multiple files. I will usually break up files according to content blocks.

Large Single Page Projects

If I have a one page site with multiple sections requiring different styles I will create a file for each section with the name of the section as the file name. This way I know exactly where to look if I need to update styles in the future.

Large Multi-Page Projects

For multi-page sites I will create separate files for pages that require a lot of unique styles.

WordPress Themes

For WordPress themes I usually add files for comments, sidebar, page navigation, custom post types, and widgets. Complex page templates also get their own files.

Just break it down in a way that makes sense to you and your team. Don’t be afraid to consolidate files in the future either. Sometimes when I optimize style rules I decide that I no longer need so many files.

I hope these techniques will make life easier for you an your team and help you stay organized and better maintain your web development projects.