How to organise my web content?

Question

What is the most common way to organise web content, i.e. HTML, JS and CSS?

I'm usually doing this for small projects:

• index.html
• style.css
• script.js

I think this is fairly standard. But how do you do it for projects with more than one HTML/JS file? My approach is:

• index.html
• foobar.html
• style.css
• js
  • core.js
  • foobar.js

Is this a common way of doing it? Should I move CSS to a separate "css" directory even if there's only one file? How is this central CSS file usually called? "style.css" or "base.css" or something else? Is it common to move HTML files to a separate directory?

Answer 1

That's pretty much a matter of taste.

However it's pretty common to put all your js/css and static images into a single folder like /static or /media. So for example /media/css/style.css. The point here is that you'll often develop dynamic pages using a application server (Ruby on Rails, Django) and want to serve the static content using a light weighted webserver like nginx.

You may want to have a look at http://html5boilerplate.com/ which contains most of the current best practises.

Answer 2

I do this:

index.html
styles/
    main.css  # Main CSS
    i/        # CSS images dir. Its name is short because: background:url(i/my_image.png);
    f/        # CSS fonts dir.
scripts/
    main.js   # Main JS
images/       # Content images