sass-boilerplate - Sass Organization

Created on: December 9, 2019   |   Last Updated on: December 9, 2019

laptop

Some of the biggest problems in development can come from the smallest things. Bugs can be introduced because of a missed semicolon or a mistyped variable.

Sometimes the things that really slow down a project, especially a new project, is trying to figure out how you should organize your code. Where should this bit go? In JavaScript and other programming languages, we use design patterns. You may be familiar with some (ie. MVC, MVVM, MV*, etc...). But what about a method for our Sass?

Well, I created a simple package called, sass-boilerplate.

Modular CSS

The package itself, does nothing. There's no JavaScript or any other programming languages. It's just a few folders, and a few .scss files.

In creation of the sass-boilerplate repo, the main focus was to create a folder structure that would give each and every snippet of code a home. Removing the thought process of asking, where should this go?

And also removing the need to create the same exact folder structure I found myself using time and time again. The boilerplate is adapted from SMACSS or rather Scalable and Modular Architecture for CSS. The book is free!

The folder structure is quite simple, there are 4 folders, base, dependencies, modules, and utilities. As well as, a few .scss files within those folders. Let's dive into each one of them, to give a better understanding of why they exist.

SMACCS SMACSS - DOWNLOAD THE BOOK

Base directory

The purpose of the base directory is to contain all the default styles. These styles would be related to the base elements. There are no classes, or ID's. This folder is strictly for code on the basic level. The styles could be any element selector, descendant or child selectors, and any psuedo-classes.

At this level there should be no need to overwrite any other styles.

body {
    margin: 0;
    padding: 0;
}

p {
    font: {
        size: 16px;
        weight: 400;
    }
}

Dependencies directory

The dependencies directory is available for your imported packages. This is where you can import Bootstrap or Foundation, bring in any resets, or any other package that could be imported with *.scss.

@import ('node_modules/bootstrap/bootstrap');
@import ('https://fonts.googleapis.com/css?family=Open+Sans')

Modules Directory

Now this is where the rubber really gets to meet the road. In the modules directory this is where the bulk of your code will go. Various components may go here, the site's navigation, contact form, cards, headers, footers, etc...

    .nav {
        background-color: #ffd700;
        color: #252525;

        @at-root &__list {
            float: right;

            @at-root &-item {
                display: inline-block;
            }
        }
    }

Utilities Directory

And the last given directory is the utilities directory. The utilities directory is a very special directory. Inside this directory all your help files will call it home.

This folder holds your mixins, variables, functions, and all other Sass tools to help you out in your project.

Bonus

There's one other directory that you may want to create that I didn't include. That directory or file is called the shame file. The shame file or folder is for code that you know for a fact needs to be refactored but needs to be done as a hot fix. This file will be a collection of styles that would work as a todo list of code that needs to be readdressed.

I think this is a good idea, because it gives you one area to look at for all your technical debt that you will accrue over time. Instead of looking into multiple files, you'll have one singular location.

Conclusion (tl;dr)

Everything can be structured and organized, even your Sass files. You can take a look at the sass-boilerplate repo or even install into your next project:

    npm i @sayhelloelijah/sass-boilerplate
    mv {path_to_project}/node_modules/\@sayhelloelijah/sass-boilerplate {path_to_asset_director}/{rename_directory}

With the second command I recommend moving it out of the node_modules directory into your project's root directory and changing it's name to whatever you like. Or you could keep "sass-boilerplate" if you want. It's your project!


Posted In: Web Development