9

I've been doing web development for years, and I've always done a web structure similar to this:

public_html/login.php
public_html/css/login.css
public_html/js/login.js
public_html/img/logo.png

I've seen other people use:

styles/login.css
images/logo.png

And then recently I found out that my co-worker likes:

public_html/a/login.js   - application
public_html/s/login.css  - styles
public_html/i/logo.png   - images
public_html/p/photo1.jpg - photos
public_html/f/menu.swf   - flash

Other than saving a byte or two, are there any advantages or disadvantages to any of these options? Is there a best practice for this concept?

St. John Johnson
  • 193
  • 1
  • 1
  • 5

4 Answers4

7

I'd stick with your current system, although I may be biased as I use just about the same names myself.

I find that keeping a three letter folder name is verbose enough to have meaning, but concise enough to keep my URLs tidy.

Trimming each folder down to a single letter is overkill, and as mc10 points out, is widely open to interpretation. For instance, I would never choose 'a' for Javascript files: I would have picked 'b', for "behavior". I don't think either is more correct, it just points out how ambiguous the naming scheme is.

While using "styles" and "images" as folder names is perfectly fine, I find it makes much more sense to use a shorter name. Think about how many times that folder will be referenced, in every file, in every URL and request, and the bytes start adding up. Granted, I don't think you'll see any real-world bandwidth savings by using shorter folder names, but I'll take every bit (and byte) I can get.

I usually stick to these couple folders:

  • js - Javascript files
  • img - Image files
  • css - CSS files
  • lib - Server-side scripts that do not produce output. Libraries, classes, etc.
  • doc - Binary files, like office documents and PDFs, that aren't part of normal page navigation
Jacob Honeyhume
  • 2,099
  • 13
  • 23
2

CSS and JS folders are nice for an individual site that may be statically coded (a.k.a. only HTML), but it's not practical for a larger site that uses a CMS.

CMSs use "styles" and "images" folders in their own folder structure, just that it's usually buried within subdirectories. It's a nice way of laying out content, and favored by many CMSs.

Having one-letter folder names is confusing. On first look, I would have been confused with the difference between photos (p) and images (i). Using a for "application" also seems cryptic.

Kevin Ji
  • 200
  • 3
  • 9
1

Using folders for css and js as opposed to individual files depends entirely on the scope of your project.

If you have, or will potentially need more than one script or stylesheet then organising them into folders will make it easier to maintain and manage the site.

If you do decide to use folders then again, giving these long or short names is a personal preference.

Although the one letter names save bytes and can look a little neater, in my experience if you have more than a handful of people working on the site this can become confusing.

ajcw
  • 618
  • 5
  • 11
1

You can also do this method to.

1st Method:

  • /i/common/
  • /i/layout/
  • /i/lib/
  • /i/misc/docs/pdf/
  • /i/misc/docs/csv/
  • /i/misc/docs/txt/

Note: It is best if each file will be renaimed in their md5 summary.

Examples:

  • /i/common/9df48e2cf2d25740e4ba54e8cd73b3a3.png,
  • /i/layout/2b33962041cb835c227bba27424a28af.css,
  • /i/lib/a8a2a48ddaa95527c6d3db763e2b7809.js,
  • /i/misc/docs/pdf/68aafcfe9aa1ab7d83a6ce8df302155e.pdf

2nd Method:

  • /assets/common/
  • /assets/templates/template_name/
  • /assets/includes/js/
  • /assets/misc/pdf/
  • /assets/misc/csv/
  • /assets/misc/txt/

Note: It doesn't require to rename files to md5 strings but every spaces should be replaced by dash/-

Examples

  • /assets/common/uploads/2014/12/company-site-has-been-launched.jpg

3rd Method:

  • /site/files/
  • /site/layout/
  • /site/scripts/
  • /site/misc/docs/pdf/
  • /site/misc/docs/csv/
  • /site/misc/docs/txt/

REMARKS: In public_html "common" folder subdirectory you can make a new subdirectory after it and name it "uploads/2014/12/ for your uploaded files same as how wordpress organizes your uploads.

js92
  • 11
  • 1