What should I name my CSS style sheet file?

Question: What should I name my CSS style sheet file?


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.
  • 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.
  • 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.
  • 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.
  • 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.

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.

The extension 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.

I prefer:


Name style sheets after their function. 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
  • Page sections
  • Whole site with sub-sections