As you add more and more styling rules and potentially more style sheet files, you need to remember to keep things as tidy and streamlined as possible. When CSS becomes unwieldy, you lose track of styles you've already set, the original intentions of certain classes or IDs, and in which file you put which rules.
Generally speaking, the number of CSS files used should be kept to a minimum. The more files that need to be called on a page, the more lag it causes in the loading times. Faster internet connections have resulted in shorter attention spans in users, so we don't want any unnecessary time to come between the user and our content. That being said, it may be logical to put certain rules in a separate file—especially if they're rules that don't need to be called on every page, so be thoughtful in how you set up your styling.
As with HTML, comments in CSS are a good way to label a section of code to help you remember its purpose and make it easier to find. So, commenting in CSS has basically the same purpose, but its syntax is just slightly different. Any text that you want commented should go in between /* and */.
/* Quotation Block */
div.artquot {
background-color: #BBEEDD;
border: 3px dotted purple;
width: 75%;
height: 350px;
}
div.artquot p {
font-style: italic;
color: #333333;
}
As your style sheets become more complex, they will get longer. To help you and anyone else who may need to look at your style sheet, it's best practice create an index at the top of your style sheet that outlines your general CSS stylings.
/*
*******************
* TABLE OF CONTENTS
*******************
* Global Styles
* Images
* Example Text Boxes
* Text Tables
* Block Quotes
* Grid Layouts
*******************
*/
/* Global Styles */
body {
background-color: wheat;
}
p {
font-size: 1.05em;
font-color: darkgrey;
}
...
