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

Organize Code with Comments
CSS files can become quite extensive, spanning hundreds of lines. These large files can
make finding and editing our styles nearly impossible. Let's keep our styles organized in
logical groups. Then, before each group, let's provide a comment noting what the follow-
ing styles pertain to.
Should we wish, we can also use comments to build a table of contents at the top of our
file. Doing so reminds us—and others—exactly what is contained within the file and where
the styles are located.
BAD CODE
1. header { ... }
2. article { ... }
3. .btn { ... }
GOOD CODE
1. /* Primary header */
2. header { ... }
3.
4. /* Featured article */
5. article { ... }
6.
7. /* Buttons */
8. .btn { ... }
Write CSS Using Multiple Lines & Spaces
When writing CSS, it is important to place each selector and declaration on a new line.
Then, within each selector we'll want to indent our declarations.
After a selector and before the first declaration comes the opening curly bracket, { , which
should have a space before it. Within a declaration, we need to put a space after the colon,
: , that follows a property and end each declaration with a semicolon, ; .
Doing so makes the code easy to read as well as edit. When all of the code is piled into a
single line without spaces, it's hard to scan and to make changes.
BAD CODE
Click here to view code image
1. a,.btn{background:#aaa;color:#f60;font-size:18px;padding:6px;}
GOOD CODE
1. a,