+ 3

Which would be a better way to organize html, css, js files?

{A. Put .css files in one folder (styles) Put all JS files in one folder (scripts) And the html files... some will be out of folders, and some we can put in folders if it's a follow up... like sololearn.com/discuss/new (new would be inside a folder called discuss). } { B. put all styles and scripts of a page in one folder. Example: for page y, we make a folder called yz. y.css y.js /new (a follow up page) Maybe if you have some you will need to use multiple times, leave them outside folder. Like nav.css, footer.css, and maybe an images folder. So when it comes to using the files. y.html yz { style.css script.js i.png x.png } ... <head> <....href = "yz/somestyle.css"/> <...href = "yz/script.js"/> </head> ... } Or are there other ways, maybe better ways to organize files?

html to way how best folders pages organize

13th Dec 2020, 3:51 AM

Ginfio

3 Answers

+ 4

If using a bundler like Webpack, Gulp, or Grunt, it doesn't matter. The scripts are merged into a single JS file and styles merged into a single CSS file. If working with web components, ReactJS, VueJS, etc... the styles and scripts can be in the same folder as the component. But it doesn't really matter. If working with straight up static HTML files, without any bundlers, I would keep it all in the same CSS and JS files. So... basically... split them up if you're splitting up the HTML into components and using a bundler. Another objective is to minimize the number of files to download. So... keeping it all in a single CSS and single JS file helps with that goal. 😉

13th Dec 2020, 5:08 AM

David Carroll

+ 2

Ginfio You can have files structure like /project-name /css /js /images /html There maybe operation/section specific structure like /css /op1/abc.css /op2/abc.css /op2/xyz.css /op3/abc.css Same like css files structure you can have for html, js and images files. Remember don't mixed up the operation specific files in a single folder. If there are multiple operation in a single project then put your files structure operation specific. For example in Sololearn there are multiple operation/section like Feed, Learn, Discuss, Code. So we can make folder of these sections and put our files in a proper way.

13th Dec 2020, 4:16 AM

A͢J