Organizing Files for Web Projects

Historically I’ve always organized my website files pretty much based on file type. For example, I would have an images folder, and a folder for javascript files, and a folder for sass/css files (php files generally are organized fairly logically, based on what they do). It seems like this is a normal setup, and this line of thinking was reinforced once I got a real job, and saw that this is how they do it too.

It’s not really the best way though.

As I have been building out a few of my past projects, I’ve transitioned to a more modualized approach, meaning that things live together based on what they do. For example, I might have a navigation bar that, with behaviors that are controlled by javascript and there is obviously styling that occurs to get it to look the way I want. Rather than have all of these files spread out throughout the site, I now just place everything specific to that navigation bar module together, so the javascript, php, sass/css and anything else related to that bit of functionality in one place.

This organization makes it so much easier to find what I’m looking for, and it just feels far simpler. It also makes everything much more reusable, since I can just drop that collection of files into various projects, and everything needed to make it all work is together.