WDD 131 | File and Folder Naming Conventions

W01 Learning Activity: Naming Conventions

Overview

When working on the web, various factors such as the browser, protocol(s), operating system, languages, etc. can influence how files operate. 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 outlined in this lesson 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 examples of naming conventions.
Review: Dealing With Files – MDN

Naming Conventions

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

Use all lowercase syntax such as 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 such as 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 do not use them in the naming of files and folders.
File and folder names should be as short and meaningful (semantic) as possible such as use winter-scene-sm.png versus 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/subfolders are:
- styles – Folders with this name contain CSS files.
- images – Folders with this name contain images.
- scripts – Folders with this name contain JavaScript files.