We are a small design / web shop. I have recently setup a new base repo using gulp and SASS/SCSS. When I setup our SCSS file structure I broke up our one massive LESS file we were using into a bunch of smaller SCSS files.
The new structure is like this
Inhouse
- typography
- tables
- buttons
- ...
- navigation
- sitewide
- single-pages
Vendor
- bootstrap
- fontawesome
Obviously this is a simplified layout.
This raised a discussion in house. Some of us preferred having 1 big LESS file and some of us (me) like having styles broken out into their own sheets. When I look online at other SCSS implementations I see them breaking their SCSS into multiple sheets, but perhaps that isn't best for custom / in house stylesheets.
I have not been able to convince anyone else that this is the correct method.
Can someone provide me with a good argument one way or the other? Is one large SCSS file easier to work with for in house / custom stuff or should we instead be using multiple files.
Many modular sheets beat one big sheet every time. I haven't worked on many large client projects, but since I've switched to modular sheets it's so much better to hand over code or work with a team.
Bootstrap is the most popular css framework for a reason. I've adopted their philosophy and built a system similar to what you've described above, which I use to scaffold every project. Organization has never been better, and not having to scroll or cmd + f through a giant sheet has saved me several minutes per day.