Creating an Organized SCSS File Structure
Tags: webdev, beginners, scss, frontend
Published: 2023-11-05 20:46:30

As a frontend developer, maintaining a clean and organized SCSS file structure is paramount for scalable and manageable styling. [SCSS (Sassy CSS)](https://sass-lang.com/) 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](https://sass-guidelin.es/#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:

8. **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:

```SCSS
// 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](https://sass-guidelin.es/#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.