How to manage CSS and JS files structure in web application (Custom vs plugins)?

Question

I searched over the internet but I could not find an answer to my question. I am just trying to figure out a clean way to structure my CSS and JS files inside my project. Let us say for example I have a CSS folder and I have a custom my.css file and also I have a Scripts folder and I have inside it a myscript.js. I understand that my.css will go in the CSS folder and myscript.js will go under the Scripts folder in this folder setup :

root
     css
            my.css

     Scripts

           myscript.js

My question is, if I want to use a jQuery plugin like jstree for example. This library require me to add one js and one css file. Should I keep these files under the Scripts and CSS folder ?

Plan A
root
     css
            my.css
            jstree.css

     Scripts
           myscript.js
           jstree.js

Or should I separate them into a different folder for cleaner structure like this

PLan B
root
     css
            jstreeFolder  --->   jstree.css
            my.css

     Scripts
           jstreFolder    --->  jstree.js
           myscript.js

Is this structure acceptable? Any standard ways for achieving this ?

Any help is appreciated.

I keep them in a structured way as shown in this fiddle. btw, I think your post is primarily opinion based. because there is no strict structure to follow AFAIK. — Mr_Green
– Mr_Green, Commented Apr 21, 2014 at 8:00
@Mr_Green Thank you for answer. Actually yes I want to know people opinion about this. So you are suggesting to keep all the js plugins under one folder. But it will be hard to maintain if you have more than 10 plugins for example and you are looking for a special js for a specific plugin. — user123456
– user123456, Commented Apr 21, 2014 at 8:05
Sorry, I didn't get you. I am keeping all the plugins in a folder "plugin" in my above fiddle. why it will be harder then? — Mr_Green
– Mr_Green, Commented Apr 21, 2014 at 8:35
Ohh you mean by long path.. if it so, I recommend you to create a folder "js" in root directory instead of "resources" as I shown in my fiddle. keep your own js files in "resources" though. — Mr_Green
– Mr_Green, Commented Apr 21, 2014 at 8:41
I was thinking of keeping all js libraries files under one folder will make it hard for me to remove one library later on (since I have to locate what files belong to that lib). Any ways do not worry about it. I understand you structure and I think it is nice. Thanks for your suggestions man. — user123456
– user123456, Commented Apr 21, 2014 at 8:43

Kezealia · Accepted Answer · 2014-04-21 08:21:59Z

3

Root 
-- styles 
     |-- your_file.css 
-- scripts
     |-- your_file.js 
-- libs (or plugins)
     |-- jquery
     |-- jquery-ui
     ...

I think this structure will be nicer and all the third party libraries (no matter css or javascript libs) that you've chosen should be located under libs directory. It will make maintenance be easier and clear.

answered Apr 21, 2014 at 8:21

Kezealia

3984 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user123456 Over a year ago

Thank you for your answer, Do not you think this structure will make it hard for me to locate a js file for a specific library if I am using 10 libs in my project ? or what if I decide it to remove a specific lib from my project ?

Kezealia Over a year ago

@Mohammadjouhari I believe no matter how you structure your project with 10 libraries, these 10 libraries still exist. If you structure your project as plan A, then you manually separate the third party lib content. I just have a concern since they are third parties, then they should belong together. And then you know where is the place to find them instead of opening your own script or css folder and figure out difference between your scripts and third parties scripts. In addition, using CDN may make your structure a little bit more clear. :)

surfmuggle · Accepted Answer · 2014-04-21 08:17:25Z

1

For mainentance reasons i prefer another approach. The library jstreee organise the javascript files, css-files and images in a certain way.

 /libs/
       /jstree/  // <-- folder
               /themes/ <-- folder 
                  /default/  <-- folder
                      style.css
                      32px.png
               jstree.js
               jstree.search.js
      /other-plugin/

I put everything under libs and in a folder with the name of the library. This way the external dependency of a library is clear and the internal path structure (css files may point to images) of the external library is untouched.

edited Apr 21, 2014 at 8:17

answered Apr 21, 2014 at 8:09

surfmuggle

6,0408 gold badges58 silver badges96 bronze badges

Collectives™ on Stack Overflow

How to manage CSS and JS files structure in web application (Custom vs plugins)?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related