: Directory structure for a website (js/css/img folders) For years I've been using the following directory structure for my websites: <root> ->js ->jquery.js ->tooltip.js
For years I've been using the following directory structure for my websites:
<root>
->js
->jquery.js
->tooltip.js
->someplugin.js
->css
->styles.css
->someplugin.css
->images
-> 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?
More posts by @Jamie184
3 Comments
Sorted by latest first Latest Oldest Best
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:
myapp/
ui/ # or "www"
lib/ # third-party
jquery/
sugarjs/
backbone/
underscore/
app/ # application logic
main.js
router.js
views.js
models.js
style/ # all presentation
main.css
buttons.css
icons/
add.svg
log.png
img/
logo.png
signup.png
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.
Example:
<root>
-> 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
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.