Commenting and CSS

Many of these suggestions I have picked up on the Internet and adopted for my own use. I may or may not use all of them on any one sheet.  Find something that works for you try it out.

Adding Comments to your Style Sheet

Adding comments to your CSS can help you organize your styles into sections and explain what they are for (in case you forget in the future). The can also be used to give an alternate color representation either name or rgb number. Comments can be single or multiple lines of text but should be kept short. They can be used above the styles or beside the styles.  They can also be used to comment out styles instead of deleting them.

EXAMPLE:

 /* All CSS comments begin with forward slash and asterisk and end with an asterisk and forward slash. */

Give Your Colors Friendly Names

Hex color values aren’t always easily readable. Assign friendly names to your color values to assist you in identifying colors that you want to copy onto another declaration. It doesn’t matter if you don’t get the right color name, as long as you can differentiate between different color values.

Build A Color Table

Before you start to write your CSS code, you probably have a color scheme already in mind. Why not make a simple list of color name-value pairs? You can even arrange them according to hue and lightness for added organization. Then you’ll have a central section from which to copy all your color hex values. One site I like to use is SlayerOffice Color Palette. I usually take a screen shot of the palette and save it within the website folder.

500 Named Colors with rgb and hex values

Group Your CSS Rules

Create sections for your styles and use comments for headings to make the sections easy to distinguish. The following are only suggestions:

• Masthead
• Structure
• Navigation
• Search
• Headings
• Lists
• Forms
• Links
• Misc

Example of Heading Comment

/* Masthead
==================
*/

Make A Sections Table Of Contents

Use a Table Of Contents to aid in organizing your style sheet code. You get a summary of the contents of a specific style sheet at a glance, you can also use it as a keyword guide for using your code editors' Find function to jump to that section easily. This only works if you have matched the items on the TOC with the section-separator comments of your code.