File Naming Conventions For Web Developers

Updated by Joseph on in Web Development.

Whenever I mention naming conventions to my students for the first time, there’s just a slight confusion that seems to fill their minds.

Naming conventions are helpful tools for organizing and structuring directories (or folders) and files. In web development, this includes ID’s, classes and variables.

For the purposes of this article, we’ll just focus on best practices when naming directories and files.

What are naming conventions?

According to Wikipedia, “a naming convention is a convention (generally agreed scheme) for naming things”.

That seems right.

More succintly, a naming convention is an agreed way of naming things.

This agreement can be with yourself, as part of a team or come from broader sources like best practices in your industry.

Naming Directories And Files

When it comes to naming directories and files there are a few rules that we need to follow.

  1. Lowercase Only: When naming directories and files, ensure that all names are lowercase only.
  2. Alphanumerics Only: Only use alphanumerics when naming directories and files. Alphanumerics are the characters a-z and 0-9. The only exceptions to this rule being: - (hyphens), _ (underscores) and ~ (tildes).
  3. No Spaces: Don’t use spaces in directory or file names. Spaces are encoded by the server, producing long, ugly URLs. Use hyphens instead.
  4. Keep It Short: Names should always be descriptive, but when and where possible, try to keep directory and file names as short as possible. In most instances, that’s about 25 characters or less.
  5. Proper File Extensions: Whether it’s index.html, style.css, script.js or whatever, make sure that you have the file extension properly seperated from the filename with a period (.).
  6. Be Consistent: In all of this, be consistent. Consistency will ensure an organized directory and file structure that makes everthing easier to find.

Resources