How to structure your website files and folders

Looking at the different ways to structure your files and folders and the advantages/disadvantages between each method.

1. Organized by type

Most web developers go for a standard file and folder structure of:

/js
  /classes
  /libs
  /app.js
/css
  /screen.css
  /print.css
/images
  /icons
  /logo.png
/templates
  /mobile
  /base.html

This structure is widely used across frameworks, examples and sites but starts to get messy quickly. Where would you put a reusable navigation file? or a javascript file that only relates to mobile? or a css file for a certain page?

As a site gets bigger you realize that you need a structure for each folder. You also need subfolders for those folders. So how do you organize files by section? by type? by name?

2. Organized by component

Following the web component approach, each folder consists of the code for that one piece of functionality only.

/components
  /navigation
    /navigation.css
    /navigation.html
    /navigation.js
  /section
    /section.css
    /section.html
    /section.js

This is a great approach if you have organized developers or are using a framework which encourages components.

3. Hybrid approach

After many sites I believe the best combination is to group global css and javascript into a single folder, along with folders for reusable components of js, css, html and then view-specific layout html. This gives the maximum flexibility for any type of site build.

/base
  /fonts.css
  /analytics.js
/components
  /navigation
    /navigation.css
    /navigation.html
    /navigation.js
  /section
    /section.css
    /section.html
    /section.js
/views
  /products.html
  /product-detail.html

base — global site-wide code
components — reusable code organized based on content type
views — project and page-specific code

The structure of having reusable generic code vs site specific code will help you reuse parts for each new project and save you time when trying to find things.