In an attempt to keep files organized for a website to grow, there seems to be an obvious standard way to go. But I’ve decided on a different approach this past year that so far has worked better for me. Let’s take a look at the two approaches.

Folders for assets

The most common approach I’ve seen, and have used since I can remember, is to create folders for different asset types and keep them all in one place. Images in an ‘img’ folder, CSS in a ‘styles’ folder, Javascript in a ‘js’ folder.

So as pages are added, they can all reference the same paths from the root across the board. Additionally, I would keep all web pages in the root directory, with a server htaccess file that manages the friendly URL’s for them.

Over time, I’ve found that there is an inherent struggle that comes with this approach for large sections of the site that require their own specific assets. Keeping their images in the global images folder just feels wrong and over time gets messy. I have tried a system of subfolders but that also ends up going off the rails eventually.

Folders for pages

So I (finally) decided to rethink my entire approach and came up with a bottom up model: instead of each asset type, each page gets its own folder, with an index file in it for the page code. And all assets needed for each page go within its folder as well (with global assets going in the root). So now each page is essentially considered a section on the site.

This creates a friendly URL by default without any special server setup required. And if a page does turn into a larger section with subpages, they would get their own subfolders and be treated the same way, creating a natural branching.

So far I’ve been finding this to feel much more simple to manage as a site grows. From making decisions of how to separate CSS and Javascript code easier, to being better at cleaning up unused assets.