What Should I Name My CSS Style Sheet File?

The look and feel, or "style" of a website is 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. This is what I use for most of my web design work - a single CSS files with all the rules my pages need. So the question now becomes - what should you 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 hosting 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. I even make it a point to name files like PDFs using these same conventions, just in case I ever need to add them to a website. If you feel you need a space to make the file name easier to read, opt for hyphens or underscores instead.

For examples, instead of using "this is the file.pdf" I would 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 number character, this can cause issues. 

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. In my own work, I use lower case characters for every file name. I have actually found this to be something that many new web designers struggle to remember to do. 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

CSS File Naming Conventions

If you only will ever have one CSS file on the site, you can name it whatever you like. I prefer either:

styles.css or default.css

Since most of the sites I work on include a single CSS files, these names work well for me.

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 Web page 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.). 

Original article by Jennifer Krynin. Edited by Jeremy Girard on 9/5/17