There are many different coding styles, some do not like indentation, some like to capitalize certain things, others like to add more than one element on a line, the main train of thought is they are all after one common thing: organization and better code.
Without influencing my coding style, I’ll discuss ten tips for writing better CSS. Let me know what you think in the comment section!
Comments
Commenting throughout your style sheet significantly helps you locate certain code blocks of CSS quickly and efficiently. Imagine trying to search through a CSS file with hundreds of lines of code, it can take quite some time to get where you want. Instead, neatly organize your CSS code by grouping similar elements and describe the groups with simple comments. By doing so, instead of searching hundreds of lines of code, you can search through several grouping comments instead, saving you a lot of time locating certain code bits, as well as it keeps your code neatly organized.
Indentation
Indentation is another key to keeping your code neatly organized and easy to flip through. Having the rules indented from the classes and IDs makes it a lot easier to read the code and identify between them. These little things improve your code’s layout to make it easier to work with and modify in the future.
Shorthand Code
I have seen many style sheets consist of non-shorthand code. Imagine having 350 lines of CSS code, if each class or ID consisted of five rules (so seven lines per class or ID), and utilized the shorthand margin rule, it will be less cluttered, neater looking, and easier flip through. Now take the shorthand margin rule and expand it to margin-top, right, bottom, left. That is three extra lines per class or ID, making the 350 lines of code to 500 lines of code, that is an extra 150 lines of unnecessary code making the style sheet cluttered and more difficult to navigate through. Therefore, use shorthand rules when applicable to save on clutter and speed.
One Line per Rule
One of the most irritating things to see is multiple rules written out on a single line as if the person who coded it was running out of lines and crammed everything onto several. Code efficiency starts with organization as organization leads to faster coding and navigation, which ultimately leads to performance. Therefore, separate your CSS rules line by line, as you are helping yourself in the long run.
Hacks Should Stay Out
Separate your Internet Explorer hacks from your main CSS by creating separate style sheets targeting the different versions. By keeping your hacks mixed within the rest of your mainstream code, it is not only clutter, it usually is not valid code as well as it may cause troubles between different browser versions. Therefore, keep things neatly organized and rather simple by having browser version targeted CSS style sheets.
Meaningful Names for Classes and IDs
Many CSS coders including myself tend to sometimes throw some odd class and ID names when we are in a hurry to get things done. The problem with this is that later on when we need to modify our CSS style sheet, we would need to reference our HTML as well to figure out which class or ID belongs to what.
Instead, save time by giving your class and ID names meaningful ones that reference what they relate to, something you can understand down the line when you get back to it. For example, if you create a class that is styling a footer widget bar, do not name the class widget bar if you have others, but rather footer widget bar as it describes it exactly and when you get back to it at a later date, you will know what it is referencing exactly.
Eliminate Unused CSS Classes and IDs Immediately
Many times, we tend to expire certain CSS classes and IDs we do not need to use anymore, but instead of removing the code from the style sheet, we tend to keep it in the file, which starts to accumulate with unused elements. By keeping the unused classes and IDs in the style sheet, it just continues to make it difficult for you to skim through the file and locate what you need to modify, and in most cases, it makes it confusing to identify between used and unused elements. Therefore, as soon as you no longer need to use a class or ID, it is in your best interest to remove it from the style sheet or, you can archive it in a different file if you feel you may reference it in the future.
Alphabetical Order
Another key aspect to keeping your code easy to work and manipulate with is to alphabetically organize your CSS classes, IDs, and or rules within them. This allows you to easily skim through the style sheet and arrive right at the class or ID you need to modify without much hassle at all. Additionally, alphabetizing the CSS rules within classes and IDs also helps keep things tidy and as well easy to locate.
Combining Selectors
A great easy way to organize your style sheet is to combine multiple selectors if they have similar definitions or style rules. So for example, if you have li, ol containing similar style definitions, just combine them together into one to save space and to keep things tidy.
Split Into Multiple Files
If you are working on a rather large-scale project with countless amounts of CSS lines, it is in your best interest to separate your CSS into multiple groups in multiple files. This makes your work a lot easier and saves you time from locating CSS code blocks instead of searching one main file with thousands of lines. For example, you can split typography into one file and the main layout elements into another.
Therefore, if you need to modify or add to the typography style sheet, you can easily go to a file that contains just that without the hassle of skimming through other unrelated classes and IDs. However, if you are working on small projects, splitting your CSS code into multiple files might be overkill; thus, this method should not be used liberally across many projects small or large.
Your Turn To Talk
What do you think? Do you use any of those when writing CSS? How do you do it? What do you prefer? Please take a moment to let me know in the comment section!