CSS: The Missing Manual

Organizing Styles and Style Sheets

You've learned a lot in this book about creating styles and style sheets. But when you're designing a site that's meant to last, you can incorporate a few other steps to help you out in the future. The day will come when you need to change the look of the site, tweak a particular style, or hand off your hard work to someone else who'll be in charge. In addition to leaving notes for yourself and others, a little planning and organization within your CSS will make things go more smoothly down the road.

Name Styles Clearly

You've already learned the technical aspects of naming different types of selectors—class selectors begin with a . (period) to identify the styles as a class, and ID styles begin with the # symbol. In addition, the names you give IDs and classes must begin with a letter, and can't contain symbols like &, *, or !. But beyond those requirements, following some rules of thumb can help you keep track of your styles and work more efficiently:

Name styles by purpose not appearance. It's tempting to use a name like .redhighlight when creating a style to format eye-catching, fire-engine red text. But what if you (or your boss or your client) decide that orange, blue, or chartreuse look better? Let's face it: a style named .redhighlight that's actually chartreuse is confusing. It's better to use a name that describes the purpose of the style. For example if that "red" highlight is intended to indicate an error that a visitor made while filling ...