We will be continuing with the CSS Guidelines. Read the previous article here.
The 80 characters rule might seem odd at first, but there is a strong reason behind it. First, it will be easily read on smaller screens and second, you may keep multiple files open side by side without the text wrapping onto the next line.
One line carries one change – this is the base rule for multi-line CSS. This is especially important for more reliable diffs and a reduced chance of conflicts.
A table of contents – Useful in so many things, just as useful in CSS writing, especially if you are going to offer/sell your CSS, as is or as part of a project. Of course, it won’t be easy and it will take you some time to keep it up to date, but believe us, you will be thankful when you will be searching for something. And that will happen more often than you think.
Titles and marking the sections
Make sure you start each section with the title describing what follows. Before the title, use the “#” symbol. This will help you with the search. For instance, if you have a section called “banner”, searching the term will return, probably, many results. However, with “#banner”, things will be a lot simpler and the search more accurate
Alignment – Aligned related strings on one column, to make it easier for developers to modify if their text editor allows column editing.
Make sure you apply the same syntax in HTML as well.
Since they are connected languages, it would be a shame not to apply the same syntax in HTML files as well. As for the reasons why doing this important, we don’t have to repeat ourselves, they are the same as above.
Here are some basic rules you should follow:
- Don’t be lazy, always quote attributes, even though it works just fine without them. This way, you will reduce the chance of accidental error.
- Group related classes in square brackets
- Use whitespace to (1 or multiple “enters”) to delimitate thematically. For instance, the “head” area and the “body” area.
Although it is the thing that doesn’t have any impact on the way the website looks whatsoever, commenting is of utmost importance. Without comments, another developer will find it very difficult to understand, no matter how logical everything seems to you. Even for you, after a while in which you haven’t laid eyes on for a while, it will seem utterly surprising, like it was written by someone else.