Cacher is the code snippet organizer for pro developers

Small project : 

_layout.scss
_component.scss
_base.scss
main.scss

Base file is where I have the resets, variables, mixins, and some utility CSS classes. It may look like there is a lot to fit in a single file. However, some of these subsets may only have less than 20 lines, some subsets may not even have any code.

Component file is for components such as buttons, navbars, cards, anything that is reusable. Since we have a small project our component file should be manageable.

Layout File handles the overall layout of the web page such as container and grid systems.

Main File does only one thing which is to import all the above files.




Big project : 


base/
components/
layout/
pages/
themes/
abstracts/
vendors/
main.scss

Base: animations, base, typography, and utilies.
Components: have a single scss file for each individual component
Layout: Header, footer, grid, navigation
Pages: Have a single scss for each specific page
Themes: deals with various themes (optional, I haven’t use it yet)
Abstracts: handles function, mixins, and variables
Vendor: handles 3rd party css