WDD 131 | File and Folder Naming Conventions

File and Folder Naming Conventions

Overview

When working on the web, there are numerous things that affect the operation of the files, such as the browser, the protocol(s), the operating system, the language(s), etc. While many of these are out of your control, you can keep your work consistent and manageable through standard file and folder naming conventions.

"When you're building a website, you need to assemble these files into a sensible structure on your local computer, make sure they can talk to one another, and get all your content looking right before you eventually upload them to a server." - MDN (Mozilla Developer Network Reference)

Prepare

The file and folder naming conventions will be considered 'best-practice' rules for this course. These rules should be applied to all files and folders created in your course work.

Note that most organizations have their own file management guidelines and best practices, including conventions for naming files, folders, and other workflows. These conventions may vary from one organization to another.

Here are some naming conventions found in legacy programming.
Review: Dealing With Files - MDN

Naming Conventions

You will be expected to follow these naming conventions throughout the course.

Use all lowercase syntax, e.g., products.html

Platforms and systems handle case sensitivity differently. Case sensitivity is an important concept to understand when managing files and folders.
Do NOT use spaces in file and folder names. Use hyphens instead, e.g., design-document.html

Spaces are handled inconsistently by user agents so do not use them. The Hypertext Transfer Protocol (HTTP) ignores spaces, except in file names. In file names, it replaces a space with this syntax: "%20" which syntax is confusing. Avoid using spaces and instead, if you want to create visual space, use hyphens.
Do NOT use special characters, e.g., <,>, \, /, #, ?, !

Special characters often mean specific things to computers, so just avoid using them completely in the naming of files and folders.
File and folder names should be as short and meaningful (semantic) as possible, e.g., winter-scene-sm.png vs. image13-v123523brokenbranchlifeimagery w200x200.png

Short names save you, other developers, and site visitors from having to remember long complicated names for files and folders. When meaningful, names can also help predict the purpose or nature of the file or folder contents.
In this class, the standard folder names for our sites/sub-folders are:
- styles - Folders with this name contain CSS files.
- images - Folders with this name contain images.
- scripts - Folders with this name contain JavaScript files.