The rules of CSS-code setting are pretty simple and if you strictly follow them your code will be readable and correct.
Here is an example of a typical CSS fragment:
#navigation a:hover{
border: 1px solid #fff;
background: #ddd url(bg-btn.gif);
}What shall we pay attention to in the above example?
First, the selector shall be put down from a new paragraph and be finished with an opening crochet.
Second, every CSS element must start from a new indented paragraph and finish with a semicolon.
A tabulation symbol must be use for an indention. If required you may add comments to highlight particular semantic fragments of the CSS code. The comment block in CSS start and finish with the symbols "/*" and "*/" correspondingly.
Upon the standard the class and identifier names are sensitive to the register that's why such classes as MyClass and myclass represent two different classes.
Nevertheless, different browsers read these distinctions in a different way that's why to avoid the mess the class and identifier names shall be put into the lower register and their component elements shall be divided with "-".
For example:
Not recommended:
#NavigationBar{…}
Recommended:
#navigation-bar{…}
The choice of the names for images as well as any other files is important too - they shall be put into the lower register.
This is related to the fact that the most of the hosting providers provide their servers based on the Unix/Linux systems, that are sensitive to the file name register.
If for example, you name your file "MyPicture.jpg" but in your CSS code you refer to it as to "mypicture.jpg", on the Windows platform you will not see any changes so the picture will be downloaded correctly.
But when you place your code on the server, most likely that the system will not find the file required. i.e. "mypicture.jpg".
The name of the CSS file, picture or class shall be semantic and you shall choose it in such a way that it would allow to reflect the essence of the object.
These rules will help to make your code more readable and easy to edit.
Close