Notes on SASS File Structure

Currently, my CSS folder structure is arranged in such a way (based on Group Buddies):

css
|-- sass
    |-- default
        |-- structure
            |-- atoms
            |-- molecules
            |-- organisms

Originally, there’s an additional templates folder alongside structure. The common difficulty I encountered was categorizing a rule-set between molecules and organisms. I didn’t bother including templates since I prefer to prioritize the object than the scope or context it is in.

Object or Component

To solve this difficulty, I plan to rearrange my SASS file structure and categorize rule-set files into just two folders:

• objects – contains rule-sets of elements
• components – contains rule-sets of two or more elements in combination

The new structure would be:

css
|-- sass
    |-- default
        |-- structure
            |-- objects
            |-- components