Creating an Organized SCSS File Structure

As a frontend developer, maintaining a clean and organized SCSS file structure is paramount for scalable and manageable styling. SCSS (Sassy CSS) offers features like variables, nesting, and modules, making it a powerful tool for writing CSS more efficiently. However, as the project grows, so does the complexity of managing these files. To keep your stylesheets manageable, we’ll explore a structure that scales well for projects of any size.

Understanding SCSS Basics

Before we dive into structuring, it's important to have a basic understanding of SCSS. It's an extension of CSS that allows you to use variables, nested rules, mixins, functions, and more, in a syntax that's fully compatible with CSS.

The 7-1 Pattern

A popular approach is the 7-1 pattern, which structures your files into seven folders, plus one main file to import everything. This method is scalable and helps keep your files organized and focused.

Here’s a breakdown of the folders:

1. Base: Contains global styles, such as resets, typography, colors, and utility classes.
2. Components: Each component gets its own file for styles specific to that piece of UI.
3. Layout: Contains styling for larger layout components, such as headers, footers, and grids.
4. Pages: Page-specific styles that may not be reusable elsewhere.
5. Themes: For different visual themes or for handling dark/light mode.
6. Abstracts: Holds SCSS tools like variables, functions, mixins, and placeholders.
7. Vendors: For third-party styles, extensions, or frameworks like Bootstrap.

Optionally, you might have an eighth folder:

1. States: For styling states like .is-active or .is-hidden.

The Main File

The main file (usually named `main.scss`) should only contain import directives, importing all other files in the correct order. Here’s how the main file might look:

// Abstracts
@import 'abstracts/_variables';
@import 'abstracts/_functions';
@import 'abstracts/_mixins';

// Vendors
@import 'vendors/_bootstrap';

// Base
@import 'base/_reset';
@import 'base/_typography';

// Layout
@import 'layout/_header';
@import 'layout/_footer';
@import 'layout/_grid';

// Components
@import 'components/_button';
@import 'components/_carousel';
@import 'components/_dropdown';

// Pages
@import 'pages/_home';
@import 'pages/_about';

// Themes
@import 'themes/_theme';
@import 'themes/_dark-mode';

// States
@import 'states/_button-states';

File Naming Convention

It’s a good practice to prefix your filenames to indicate their purpose or location within the structure:

_variables.scss for variables,
_header.scss for a layout header,
_button.scss for a button component.

The underscore indicates that this file is a partial and should not be generated into a CSS file when SCSS is compiled.

Example Structure

Here’s an example of what your SCSS folder structure might look like in a project:

scss/
|
|- abstracts/
|   |- _functions.scss
|   |- _mixins.scss
|   |- _variables.scss
|
|- base/
|   |- _reset.scss
|   |- _typography.scss
|
|- components/
|   |- _buttons.scss
|   |- _carousel.scss
|   |- _dropdown.scss
|
|- layout/
|   |- _footer.scss
|   |- _grid.scss
|   |- _header.scss
|
|- pages/
|   |- _about.scss
|   |- _home.scss
|
|- themes/
|   |- _dark-mode.scss
|   |- _theme.scss
|
|- vendors/
|   |- _bootstrap.scss
|
|- states/
|   |- _button-states.scss
|
`- main.scss

Tips for Managing Your SCSS Files

• Keep it DRY: Don't Repeat Yourself. Use variables and mixins to avoid code duplication.
• Modularize: Each component should have its own style file.
• Use Comments: Documenting your code with comments is essential, especially for abstracts like variables and mixins.
• Naming Conventions: Stick to a naming convention that the entire team agrees on.
• Review Regularly: As your project evolves, so should your structure. Regularly refactor your files to ensure they still make sense.

Conclusion

A well-organized SCSS file structure is a foundational practice for a maintainable and scalable frontend. By employing the 7-1 pattern, using partials, and sticking to a naming convention, you’ll be able to manage your stylesheets effectively, no matter the size of your project.