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:

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.
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.
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.