This structure is greatly inspired by Jonathan Snook's book Scalable and Modular Architecture for CSS, which is a highly recommended book to read for anyone messing about with CSS in projects of any size.
Keep in mind that what is described in this document is not a framework or library, it's more of a styleguide for everyone to follow when working with front-end code on a project together (or for handing over to someone else later on).
Remember that there is no one true way, but this is a collection of battle tested guidelines and techniques that has proven themselves in the past to help keep your growing collection of front-end components better organised and structured for both small and big teams.
Categorizing our code helps us see and define better patterns throughout our work process. Each category has certain guidelines that apply to it, which willll all be explained in greater detail later in this document, but here's a quick overview:
- Mixins
- Configuration
- Base
- Components
- Layout
- Pages
- Plugins
- Placeholders
Mixins are simply were all your SCSS re-useable mixins have a common space.
The configuration set up might vary a bit depening on the size of the project. If it's a small project it's fine with just a organized file for configuration but as the project grows it might be a good idea to put divide configuration to its own files in its own folder. More on this later.
Base rules are simply the defaults. They should only be simple selectors and set the expectations for how the element should look on the page.
Components are reusable, modular parts or components of your design.
Layout rules help divide the page into sections and acts as containers for components if needed.
On larger sites it's inevitable that you'll run into pages that has a unique (for the site) flavor in some way. Most of time components will handle this for you, but when they don't this is where your styles will go.
More on placeholders later.
More on plugins later.