Since stylesheets can be loaded based on media attribute my file naming convention just follows the available options: theme-media-all.
Daniel Sokolowski Daniel Sokolowski With that said, it is a good idea to have a convention, so that your files are better organized. Hope this helps. RunnerRick RunnerRick 2 2 gold badges 12 12 silver badges 21 21 bronze badges.
Sign up or log in Sign up using Google. Sign up using Facebook. Sign up using Email and Password. Post as a guest Name. Email Required, but never shown. The Overflow Blog. Does ES6 make JavaScript frameworks obsolete?
Podcast Do polyglots have an edge when it comes to mastering programming 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.
When you create an external style sheet for your web pages, you should name the file following similar naming conventions for your HTML files. 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. Just like with special characters, spaces can cause problems on your web server. It's a good idea to avoid them in your filenames; 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 filename easier to read, opt for hyphens or underscores instead. For example, instead of using "this is the file. While this isn't an absolute requirement, some systems have trouble with filenames 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.
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 filename 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. While there is a limit of filename size on most operating systems , it is much longer than is reasonable for a CSS filename. When working on the web, different types of computers must work together.
This means that certain conventions must be followed. Always remember to name your file appropriately. Also pay attention to where exactly you are saving your files. All files even on a Mac have a file extension suffix. Adding comments to your CSS will help any future developer work with your CSS file, but will also help you when you come back to the project after a break.
A good tip is to add a block of comments between logical sections in your stylesheet too, to help locate different sections quickly when scanning it, or even to give you something to search for to jump right into that part of the CSS. If you use a string that won't appear in the code, you can jump from section to section by searching for it — below we have used. You don't need to comment every single thing in your CSS, as much of it will be self-explanatory. What you should comment are the things where you made a particular decision for a reason.
You may have used a CSS property in a specific way to get around older browser incompatibilities, for example:. Perhaps you followed a tutorial to achieve something, and the CSS isn't very self-explanatory or recognizable.
In that case, you could add the URL of the tutorial to the comments. You will thank yourself when you come back to this project in a year or so and can vaguely remember that there was a great tutorial about that thing, but can't recall where it's from.
It is a good idea to have all of the common styling first in the stylesheet. This means all of the styles which will generally apply unless you do something special with that element. You will typically have rules set up for:. In this section of the stylesheet we are providing default styling for the type on the site, setting up a default style for data tables and lists and so on.
After this section, we could define a few utility classes, for example, a class that removes the default list style for lists we're going to display as flex items or in some other way. If you have a few styling choices you know you will want to apply to lots of different elements, they can be put in this section.
Then we can add everything that is used sitewide. That might be things like the basic page layout, the header, navigation styling, and so on.
Finally, we will include CSS for specific things, broken down by the context, page, or even component in which they are used. By ordering things in this way, we at least have an idea in which part of the stylesheet we will be looking for something that we want to change. If you create very specific selectors, you will often find that you need to duplicate chunks of your CSS to apply the same rules to another element. Instead, you could use the selector.
There will be times when making something more specific makes sense; however, this will generally be an exception rather than usual practice. In cases where you have very different styles for distinct parts of the site, you might want to have one stylesheet that includes all the global rules, as well as some smaller stylesheets that include the specific rules needed for those sections.
0コメント