Harvard Extension School
CSCI E-12 Fundamentals of Web Site Development | Spring 2020

## Best Practices

### Use semantic "class" and "id" values

You can choose `class` and `id` values when authoring your CSS and HTML. A good rule is to create "logical" `class` and `id` values and not "descriptive" ones. Remember, you've gone to the trouble of separating markup and presentation -- keep this separation when creating class names.

If you can guess how the class is styled based upon the name, this should cause you to consider changing the name.

Good Class/ID Names | Poor Class Names
--- | ---
pageheader pagefooter globalnav gallery aside callout warn info error | blueborder rightcolumn rightnav thinborder redbold center

Choosing class and id names appropriately will help with:

- evolution
  Your `#rightnav` may very well become navigation positioned on the left side or the top.
  Your `.redbold` may very be changed to another color or background entirely.
- specificity and semantics
  If you have a `.dottedborder` class, you may wish to change how your thumbnail images are styled, but leave presentation of other markup that you've given the same class to unchanged.

Copyright © David Heitmeyer