To maintain an organized source of information on the code structures you’ve used, you could place a table of contents at the beginning of your CSS files. One way to do this is by using a tree overview of your CSS structure with IDs and classes placed on each tree branch. You could try using keywords like content-group, etc. to easily search for a targeted code.

You may also consider the most vital elements that need constant updating after the project is released. Include the classes and IDs for the said elements in your table of contents to make it easier for you to locate them when you need them.

*——————————————————————
[Layout]

Navigation #navbar
Advertisements .ads
Content header h2
——————————————————————-*/
…or like this:

/*——————————————————————
[Table of contents]

1. Body
2. Header / #header
2.1. Navigation / #navbar
3. Content / #content
3.1. Left column / #leftcolumn
3.2. Right column / #rightcolumn
3.3. Sidebar / #sidebar
3.3.1. RSS / #rss
3.3.2. Search / #search
3.3.3. Boxes / .box
3.3.4. Sideblog / #sideblog
3.3.5. Advertisements / .ads
4. Footer / #footer
——————————————————————-*/
One more suggested structuring method is simple enumeration without indentation. Look at the example below. The following simply requires the use of a search tool to bring you immediately to say, the RSS section, if that’s where you wish to go. That makes the process easier and less complicated.

/*——————————————————————
[Table of contents]

1. Body
2. Header / #header
3. Navigation / #navbar
4. Content / #content
5. Left column / #leftcolumn
6. Right column / #rightcolumn
7. Sidebar / #sidebar
8. RSS / #rss
9. Search / #search
10. Boxes / .box
11. Sideblog / #sideblog
12. Advertisements / .ads
13. Footer / #footer
——————————————————————-*/
<!– some CSS-code –>
/*——————————————————————
[8. RSS / #rss]
*/
#rss { … }
#rss img { … }

Structuring your CSS code with a table of contents does not only serve your benefit, but other people as well. In cases of large projects, try printing out your table for your reference. When you are part of a team, the more you need to make use of this advantage. A table of contents saves you and youre team precious time and effort.

Color and Typography Definition

Since we are yet to encounter CSS constants, we will for the moment need to identify a reference to “variables” we will be using. In the web development industry, colors and typgraphy are considered “constants,” which have fixed values used several times throughout a code.

According to Rachel Andrew, one means to deal with the lack of constants in CSS is by creating definitions at the top of your CSS file, in the form of comments, to be able to define constants. She recommended coming up with a color glossary for quick reference. The glossary will help avoid mistakes and bring about more convenience.

/*——————————————————————
# [Color codes]

# Dark grey (text): #333333
# Dark Blue (headings, links) #000066
# Mid Blue (header) #333399
# Light blue (top navigation) #CCCCFF
# Mid grey: #666666
# */

Consequently, you also have the option to make a detailed description of your layout’s color scheme. For instance, you could show specific sections of the site that used a given color or describe a specific color used for a given design.

/*——————————————————————
[Color codes]

a (standard): #0040b6 (dark blue)
a (visited): #5999de (light blue)
a (active): #cc0000 (pink)
——————————————————————-*/

There is not much differebce with regards to typography. It is also recommended for you to include important notes to provide you with a good graso of the logic behind your code.

/*——————————————————————
[Typography]

Notes: decreasing heading by 0.4em with every subsequent heading level
——————————————————————-*/

Tags: Code Readability With CSS Styleguides