Writing Your Best Code - Learn to Code HTML and CSS: Develop and Style Websites - page 275

2. .btn {
3. background: #aaa;
4. color: #f60;
5. font-size: 18px;
6. padding: 6px;
7. }
Comments & Spacing
These two recommendations, organizing code with comments and using multiple
lines and spaces, are not only applicable to CSS, but also to HTML or any other
language. Overall we need to keep our code organized and well documented. If a
specific part of our code is more complex, let's explain how it works and what it
applies to within comments. Doing so helps others working on the same code
base, as well as ourselves when we revisit our own code down the road.
Use Proper Class Names
Class names (or values) should be modular and should pertain to content within an element,
not appearance, as much as possible. These values should be written in such a way that they
resemble the syntax of the CSS language. Accordingly, class names should be all lowercase
and should use hyphen delimiters.
BAD CODE
1. .Red_Box { ... }
GOOD CODE
1. .alert-message { ... }
Build Proficient Selectors
CSS selectors can get out of control if they are not carefully maintained. They can easily
become too long and too location specific.
The longer a selector is and the more prequalifiers it includes, the higher specificity it will
contain. And the higher the specificity the more likely a selector is to break the CSS casca-
de and cause undesirable issues.
Also in line with keeping the specificity of our selectors as low as possible, let's not use
IDs within our selectors. IDs are overly specific, quickly raise the specificity of a selector,
and quite often break the cascade within our CSS files. The cons far outweigh the pros with
IDs, and we are wise to avoid them.