DJ Quilter

Front-End Developer

My Standard Preprocessor Configuration

In the last 6 months I’ve set up several configurations for both LESS and SASS, which have all involved dividing rules into separate folder and files with specific purposes, and then using the @import rule to bring them all together on compilation.

I took a lot of inspiration from an article by Tim Severien as I developed my favoured architecture. My folders usually consist of the following categories:

base
This is where all of the basics go. This includes a file with all of the reset/normalize styles and a variables file which (unsurprisingly) contains all of my variables. It will also include any generic styles which might be required by default (like a grid systems), and a helper file for things like clearfix rules.
components
If there are any components which are regularly used throughout the site, this is where they will go. There’s likely to be a buttons file, and probably a form and sidebar file. Any media queries associated with these components are usually kept in the components folder.
templates/pages
If there are multiple pages or templates which are styled differently, this is where they’ll go.
media queries
I don’t always have a media queries folder, but when I do I make the best media queries folder that was ever made it’s because there is a lot of styling required for the media queries or because there are a lot of breakpoints. I have organised my styles into files based on breakpoint and template/page, but I tend to make that decision depending on what makes the most sense for the project at hand.

I haven’t yet felt the need to get much more complicated than that and, as mentioned above, will generally make decisions on a project-by-project basis as to what architecture will work best.