For years I've been using the following directory structure for my websites:

    -> all website images...

it seemed perfectly fine to me until I began to use different 3rd-party components.
For example, today I've downloaded a datetime picker javascript component that looks for its images in the same directory where its css file is located (css file contains urls like "url('calendar.png')").

So now I have 3 options:

1) put datepicker.css into my css directory and put its images along. I don't really like this option because I will have both css and image files inside the css directory and it is weird. Also I might meet files from different components with the same name, such as 2 different components, which link to background.png from their css files. I will have to fix those name collisions (by renaming one of the files and editing the corresponding file that contains the link).

2) put datepicker.css into my css directory, put its images into the images directory and edit datepicker.css to look for the images in the images directory. This option is ok but I have to spend some time to edit 3rd-party components to fit them to my site structure. Again, name collisions may occur here (as described in the previous option) and I will have to fix them.

3) put datepicker.js, datepicker.css and its images into a separate directory, let's say /3rdParty/datepicker/ and place the files as it was intended by the author (i.e., for example, /3rdParty/datepicker/css/datepicker.css, /3rdParty/datepicker/css/something.png, etc.). Now I begin to think that this option is the most correct.

Experienced web developers, what do you recommend?

3 Answers 3


I always create a lib directory for third party components, you really don't want to be changing third party libraries unless it is strictly necessary.

Go with the 3rd option.


Instead of separating things by file type, which feels arbitrary to me, I organize files by how developers will use and think about them. I break things into a few basic categories:

  ui/ # or "www"
    lib/ # third-party
    app/ # application logic
    style/ # all presentation
    components/ # standalone bundles of html/css/js, if necessary
  server/ # or "api" (all server-side logic)

Option #2 is not practical and dangerous too as you'll have to re-apply all your changes (and hence might forget some) when you upgrade your 3rd party libraries. This is surely a big no no! Options #1 and #3 each have advantages and disadvantages. So I usually go for a combination of both.

My solution is to use Option #1 for my files and use Option #3 for 3rd party libraries.


  -> js
    -> jquery.js
    -> main.js
  -> css
    -> reset.css
    -> style.css
  -> img
    -> img1.jpg
    -> img2.jpg
  -> lib
    -> someplugin1
      -> original folder/file structure of this plugin
    -> someplugin2
      -> original folder/file structure of this plugin

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.