How to organise my web content?

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 th开发者_C百科is 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?

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.

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

I'm fond of Rails' organization. Public static files that are served to users are under /public. Then JavaScript and CSS files are stored under public/javascripts and public/stylesheets respectively. Static html files are stored under /public.

As for the central CSS file name, it's really your preference. You could name it after your website (e.g. twitter.css), or you can name it something general like base.css, all.css. etc.

I would keep your html under the public folder, but you can create a public/html folder as well.

I suggest you to move: images into other directory (of course), css if have more than one file into other directory, js if more than one file into other directory. And remember that name of the files are one of the most important things. don't call styles (if more than one) like style1 or style2 but the diffrences between them, short specifications like light_gray.css or dark_black.css. Same with scripts if you are using bigger js scripts add them into separate directory.

The most common structure I come across is:

• index.html
• foobar.html
• images
  • some_image.jpg
• stylesheets
  • default.css (application.css or style.css is also common)
• js (or javascripts)
  • application.js
  • hello_world.js

This is how it's generally done in rails and a number of other frameworks.

As your project expands it's likely you're going to have multiple stylesheets / scripts so putting things in folders to start with will save time / effort later.

In large projects you differentiate between static and dynamic files, that is, files, that are parsed and executed like PHP and files, that are sent to the client as they are. Many PHP frameworks suggest a variation of the following:

index.php       # single starting point
admin.php       # *or*
admin/index.php # admin area, separated from frontend
lib/            # contains executables, that are not directly called
static/         # contains CSS, JS, images and so on, that come from developers
assets/         # static content, that is uploaded by the user

This approach has several benefits. First, you don't mix up user uploads with your stylesheets. Then, you can easily configure your web server to send appropriate expire and Caching headers with stuff found in static ans assets.

The lib folder is forbidden for clients in some way, so you don't send code to the client, that is only for embedding.

After all, however, it's a matter of what you like and what you need.

The default for ASP.NET webforms is index.html and foobar.html go with public files in the root dir. Then there are Scripts and Styles directories under that. If you have restricted files those go in an Account directory. I am not saying this is the best way, but it is a common way to do it on the Microsoft side.