Internet, Networking, & Security Web Development 32 32 people found this article helpful What Should I Name My CSS Style Sheet File? by Jennifer Kyrnin Freelance Contributor Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML. our editorial process LinkedIn Jennifer Kyrnin Updated on November 27, 2019 Hero Images / Getty Images Web Development CSS & HTML Web Design SQL Tweet Share Email 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 different 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 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: style.cssstandard.cssdefault.css 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.cssPage Sections main.css nav.cssWhole 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.). Was this page helpful? Thanks for letting us know! Get the Latest Tech News Delivered Every Day Email Address Sign up There was an error. Please try again. You're in! Thanks for signing up. There was an error. Please try again. Thank you for signing up. Tell us why! Other Not enough details Hard to understand Submit