What Should I Name My CSS Style Sheet File?

The look and feel, or "style" of a website are dictated by CSS (Cascading Style Sheets). This is a file you will add to your website's directory which will contain the various CSS rules that create the visual design and layout of your pages.

While sites can use, and often do, use multiple style sheets, it is not necessary to do so. You can place all your CSS rules into one file, and there are actually benefits to doing so, including faster load time and performance of pages since they do not need to fetch multiple files. While very large, enterprise sites may need separate style sheets at times, many small to medium sites can do perfectly fine with just one file with all the rules your pages need. This begs the question "What should I name this CSS file"?"

Naming Convention Basics

When you create an external style sheet for your web pages, you should name the file following similar naming conventions for your HTML files.

Do Not Use Special Characters

You should only use the letters a-z, numbers 0-9, underscore (_), and hyphens (-) in your CSS file names. While your file system may allow you to create files with other characters in them, your server OS might have issues with special characters. You are safer using only the characters mentioned here. After all, even if your server allows for special characters, that may not be the case if you decide to move to host providers in the future.

Do Not Use Any Spaces

Just like with special characters, spaces can cause problems on your web server. It's a good idea to avoid them in your file names — you should even make it a point to name files like PDFs using these same conventions, just in case you ever need to add them to a website. If you feel strongly that you need a space to make the file name easier to read, opt for hyphens or underscores instead. For example, instead of using "this is the file.pdf" use "this-is-the-file.pdf".

The File Name Should Start With a Letter

While this isn't an absolute requirement, some systems have trouble with file names that don't start with a letter. For example, if you choose to begin your file with a number character, this can cause issues down the line.

Use All Lower Case

While this isn't required for a filename, it's a good idea, as some web servers are case sensitive, and if you forget and reference the file in a different case, it won't load. Using lower case characters for every file name is always a smart way to go. In fact, many new web designers struggle to remember to do this — their default action when naming a file is to capitalize the first character of the name. Avoid this and get into the habit of lowercase characters only.

Keep the File Name As Short As Possible

While there is a limit of file name size on most operating systems, it is much longer than is reasonable for a CSS file name. A good rule of thumb is no more than 20 characters for the file name not including the extension. Realistically, anything much longer than that is unwieldy to work with and link to anyway.

The Most Important Part of Your CSS File Name

The most important part of the CSS file name is not the file name itself, but the extension. Extensions are not required on Macintosh and Linux systems, but it is a good idea to include one anyway when writing a CSS file. That way you will always know that it's a style sheet and not have to open the file to determine what it is in the future.

It's probably not a big surprise, but the extension on your CSS file should be:

CSS File Naming Conventions

If you only will ever have one CSS file on the site, you can name it whatever you like. One of the following is preferable:

If your website will use multiple CSS files, name the style sheets after their function so it is clear exactly what the purpose of each file is. Since a webpage can have multiple style sheets attached to them, it helps to divide your styles into different sheets depending upon the function of that sheet and the styles within it. For example:

Layout vs. design
```
layout.css design.css
```
Page Sections
```
main.css nav.css
```
Whole site with sub-sections
```
mainstyles.css subpage.css
```

If your website uses a framework of some kind, you will likely notice that it uses multiple CSS files, each dedicated to different portions of the pages or aspects of the site (typography, color, layout, etc.).

Edited by Jeremy Girard