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.


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

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

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 realise that you need a structure for each folder. You also need subfolders for those folders. So how do you organise files by section? by type? by name

After many sites I believe the best combination is to allow for project specific js, css and html. Then also provide folders for reusable modules of js, css, html. Then you can adapt the files to match any site build.

views - project specific code organised using section or url name
includes - reusable code organised using data model or content type name
base - global site wide code organised using appropriate names

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

Here is an example of a folder structure that incorporates these methods:

- css
    - views - specific section or url
        - blog.css
    - includes - reusable modules
        - article - related to the article model
            - article.css
            - article-list.css
    - base
        - reset.css
        - layout.css
        - themes.css
        - sprites.css

- img
    - views - specific section or url
        - blog.png - normal sprite
        - blog-hi.png - 2 x size sprite
    - includes - reusable modules
        - article - related to the article model
            - article.png
            - article-list.png
    - base
        - brand.png
        - icons.png
        - social.png
        - loading.gif

- js
    - views - specific section or url
        - blog.js
    - includes - reusable modules
        - article - related to the article model
            - article.js
            - article-list.js
    - base
        - base.js
        - jquery.js
        - twig.js

- html
    - views - specific section or url, structured using rows, cols, and includes
        - blog.html
    - includes - reusable modules only inner html no widths!!
        - article - related to the article model
            - article.html
            - article-list.html
    - base.html - default file