Restructuring our Sass into more maintainable parts

When we first built our publication sites, we wrote our Sass in a single stylesheet, organized with section headings and a table of contents. After the site was live for several months, the team re-evaluated the Sass architecture and decided to break it up into more maintainable parts. This decision allowed us to see any code bloat and more efficiently update styling.

There are many resources out there for Sass architecture. Smacss is a popular philosophy for breaking down Sass. Sitepoint had a useful blog , as well. David Khourshid also offers some insight and, of course, theres always The Sass Way , a resource for everything Sass related.

The common theme that appeared in all of their recommendations: Break your sass down into reusable parts. The goal is to eliminate page-specific styling and reduce code bloat.

Drawing from the best practices of several leading tech companies, we created a directory structure that fits the needs of our business and the way we code at Industry Dive.

Here is an overview of what we came up with:

• Base (Sass i.e. variables and extendables)
• Components (reusable parts of the site i.e. forms, buttons, accordions)
• Layout (sections of the site that make a wireframe of its overall structure i.e. sidebar, footer, menu)
• Pages (custom full-page templates that appear on the site)
• Utils (universal tools and settings for the site i.e. helper classes and typography)
• Vendor (third party sass sheets i.e. Foundations grid and normalizer)

Within each folder is a sass partial named after the folder that imports the rest of the partials that fit that folders category. These top-level files are then imported into the final Sass sheet, which will be compiled to our css. While Front-end developer Jessica Bells Sass architecture is slightly different than the one we finally chose, she offers a great starting point repository on github.

Now that we can see our code more clearly, the team is conducting an audit of it. About halfway through the clean up, we have deleted a ton of unnecessary code and streamlined the way we are styling elements across the site denesting and using fewer classes while styling HTML elements directly.