Structuring SASS

We’ve been using the Sass preprocessor for a little while now and it’s undoubtedly a brilliant tool for expanding the power of CSS while also making it more maintainable.

One of the great beauties of Sass is that it enables you to split your theming files up pretty much however you see fit. This obviously helps you to keep your style rules nicely organised rather than having large files of CSS.

But in some ways this is almost too much freedom. What’s the best way to structure your files? How can we make the files as clear as possible in order to onboard new team members on to the project if required? Where should variables and mixins be kept?

We’re now relatively comfortable that we’ve settled on a solution that works for us, but there’s definitely no right way of doing it, so we’d be keen to see what other developers out there are doing. Leave us a comment!

In the meantime, here’s how we’re working it, more or less. We started with the (https://smacss.com/)[SMACSS] style guide as a base, with a few modifications. SMACSS advocates the following organisation:

• Base - styles on pure HTML elements e.g. a, p, ul etc.
• Layouts - styles which define the layout of the pages on the site.
• Components - styles which define a single component, e.g. an input field, a button, or a menu.
• State - styles which control the appearance of an element under particular conditions, e.g. :hover.
• Theme - styles which vary according to the site’s theme. This may, for example, change according to user preferences, in which case various extra style rules may be required.

We generally don’t require theme rules for many projects, and tend to put state rules in with the components, unless there is a very high amount of interactivity in the site design.

We also have separate files for mixins and variables which are kept in the projects sass folder. These measures keep everything under control and logical. If we are finding ourselves with a CSS file getting towards a few hundred lines, it’s probably time to break it down further into separate component or layout files.