Section 14.2. Organizing Styles and Style Sheets | Dreamweaver CS3: The Missing Manual

14.2. 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.

14.2.1. Name Styles Clearly

You've already learned the technical aspects of naming different types of selectorsclass 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 out a form, then use the name .error . When the style needs to alert the visitor of some important information, a name like .alert would work. Either way, changing the color or other formatting options of the style won't cause confusion, since the style's still intended to point out an error or alert the visitorregardless of its color .

Don't use names based on position . For the same reason you avoid naming styles by appearance, you should avoid naming them by position. Sometimes a name like #leftSidebar seems like an obvious choice"I want all this stuff in a box placed at the left edge of the page!" But it's possible that you (or someone else) will want the left sidebar moved to the right, top, or even bottom of the page. All of a sudden, the name #leftSidebar makes no sense at all. A name more appropriate to the purpose of that sidebarlike #news, #events, #secondaryContent, #mainNav serves to identify the sidebar no matter where it gets moved. The names you've see so far in this book #gallery, .figure, .banner, #wrapper and so onfollow this convention.

Avoid cryptic names . Names like .s, #s1 , and #s2 may save you a few keystrokes and make your files a bit smaller, but they can cause trouble when you need to update your site. You could end up scratching your head, wondering what all those weird styles are for. Be succinct, but clear: .sidebar, #copyright , and #banner don't take all that much typing, and their purpose is immediately obvious.

Note: For more tips on naming styles, check out www.stuffandnonsense.co.uk/archives/whats_in_a_name_pt2.html . You can also learn a lot from checking out the naming conventions used on other sites. The Web Developer's Toolbar, discussed in the box in Section 2.5.3, gives you a quick way to reveal the style names.

14.2.2. Use Multiple Classes to Save Time

Often, two or more items on a Web page share many similar formatting properties. You may want to use the same border styles to create a frame around a bunch of images on a page. But there may be some formatting differences between those items as well. Maybe you want some images to float to the left and have a right margin, while some photos float to the right and have a left margin (Figure 14-2).

The most obvious solution's to create two class styles, each having the same border properties but different float and margin properties. You then apply one class to the images that should float left and another to the images that should float right. But what if you need to update the border style for all of these images? You'll need to edit two styles, and if you forget one, the images on one side of the page will all have the wrong frames !

Figure 14-2. Using multiple classes on a single tag you can apply two different sets of formatting instructions.
Top: The page as originally formatted.
Bottom: In this case, both photos have the same style applied to them, thus creating the border effect. The left image, in addition, has another class style applied, causing it to float left; the right image also has a second class applied to it floating that photo to the right.

There's a trick that works in all browsers and surprisingly few designers take advantage of multiple classes applied to the same tag. This just means that when you use the class attribute for a tag, you add two (or more) class names like this: <div class="note alert"> . In this example, the <div> tag receives formatting instructions from both the .note style and the .alert style.

Say you want to use the same border style for a group of images, but some of the images you want floating left and others you want floating right. You'd approach the problem like this:

Create a class style that includes the formatting properties shared by all the images .

This style could be called .imgborder and have a 2-pixel, solid black border around all four edges.
Create two additional class styles, one for the left floated images, and another for the right floated images .

For example, .floatLeft and .floatRight . One style would include properties unique to one set of images (floated left with a small right margin), while the other style includes properties specific to the second group of images.
Apply both classes to each tag, like so :
```
 <img src="photo1.jpg" width="100" height="100" class="imgborder floatLeft" /> 
```
or
```
 <img src="photo1.jpg" width="100" height="100" class="imgborder floatRight" / > 
```
At this point, two classes apply to each tag, and the Web browser combines the style information for each class to format the tag. Now if you want to change the border style, then simply edit one style .imgborder to update the borders around both the left and right floated images.

Tip: You can list more than two classes with this method; just make sure to add a space between each class name.

This technique's useful when you need to tweak only a couple of properties of one element, while leaving other similarly formatted items unchanged. You may want a generic sidebar design that floats a sidebar to the right, adds creative background images, and includes carefully styled typography. You can use this style throughout your site, but the width of that sidebar varies in several instances. Perhaps it's 300 pixels wide on some pages and 200 pixels wide on others. In this case, create a single class style (like .sidebar ) with the basic sidebar formatting and separate classes for defining just the width of the sidebarfor example, .w300 and .w200 . Then apply two classes to each sidebar: <div class="sidebar w300"> .

14.2.3. Organize Styles by Grouping

Adding one style after another is a common way to build a style sheet. But after a while, what was once a simple collection of five styles has ballooned into a massive 150-style CSS file. At that point, quickly finding the one style you need to change is like looking for a needle in a haystack. (Of course, haystacks don't have a Find command, but you get the point.) If you organize your styles from the get-go, you'll make your life a lot easier in the long run. There are no hard and fast rules for how to group styles together, but here are two common methods :

Group styles that apply to related parts of a page . Group all the rules that apply to text, graphics, and links in the banner of a page in one place, the rules that style the main navigation in another, and the styles for the main content in yet another.
Group styles with a related purpose . Put all the styles for layout in one group, the styles for typography in another, the styles for links in yet another group, and so on.

14.2.3.1. Using comments to separate style groups

Whatever approach you take, make sure to use CSS comments (Section 14.1) to introduce each grouping of styles. Say you collected all the styles that control the layout of your pages into one place in a style sheet. Introduce that collection with a comment like this:

 /* *** Layout *** */

 /* --------------------------             Layout --------------------------- */

As long as you begin with /* and end with */, you can use whatever frilly combination of asterisks , dashes, or symbols you'd like to help make those comments easy to spot. You'll find as many variations on this as there are Web designers. If you're looking for inspiration, then check out how these sites comment their style sheets: www.wired.com, www.mezzoblue.com, and http://keikibulls.com. (Use the Web Developer's Toolbar described in the box in Section 14.3 to help you peek at other designers' style sheets.)

Tip: For a method of naming comments that makes it easy to find a particular section of a style sheet you're editing, check out www.stopdesign.com/log/2005/05/03/css-tip-flags.html.

14.2.4. Using Multiple Style Sheets

As you read in Chapter 13, you can create different style sheets for different types of displaysmaybe one for a screen and another for a printer. But you may also want to have multiple onscreen style sheets, purely for organizational purposes. This takes the basic concept from the previous sectiongrouping related styles one step further. When a style sheet becomes so big that it's difficult to find and edit styles, it may be time to create separate style sheets that each serve an individual function. You can put styles used to format forms in one style sheet, styles used for layout in another, styles that determine the color of things in a third, another style sheet for keeping your Internet Explorer hacks, and so on. Keep the number of separate files reasonable since having, say, 30 external CSS files to weed through may not save time at all.

At first glance, it may seem like you'll end up with more code in each Web page, since you'll have that many more external style sheets to link to or importone line of code for each file. Ah, but there's a better approach: Create a single external style sheet that uses the @import directive to include multiple style sheets. Figure 14-3 illustrates the concept.

Figure 14-3. Let a single external style sheet serve as gatekeeper for your site's CSS. Each HTML page in the site can link to a single CSS file (base.css in this example). The HTML never has to change, even if you want to add or remove additional external style sheets. Just update the base.css file by adding or removing @import directives.

Here's how to set up this type of arrangement:

Create external style sheets to format the different types of elements of your site .

For example a color.css file with styles that control the color of the site, a forms.css file that controls form formatting, a layout.css file for layout control, and a main.css file which covers everything else (see the right side of Figure 14-3).

Note: These suggestions are just a few possibilities. Organize your styles and style sheets in whatever seems most logical and works best for you. For more suggestions, check out this article on modular CSS design: www.contentwithstyle.co.uk/Articles/12/modular-css/.
Create an external style sheet and import each of the style sheets you created in step 1 .

You can name this file base.css , global.css , site.css or something generic like that. This CSS file won't contain any rules. Instead use the @import directive to attach the other style sheets like this:
```
 @import url(main.css); @import url(layout.css); @import url(color.css); @import url(forms.css); 
```
That's the only code that needs to be in the file, though you may add some comments with a version number, site name, and so on to help identify this file.

Tip: For a better way to attach an "IE-only" style sheet, see Section 14.5.2.
Finally, attach the style sheet from step 2 to the HTML pages of your site using either the <link> tag or the @import method. (See Section 2.4.2 for more on using these methods.) For example :
```
 <link rel="stylesheet" href="base.css" type="text/css" /> 
```
Now, when a Web page loads, the Web browser loads base.css , which in turn tells the browser to load the four other style sheets.

It may feel like there's a whole lot of loading going on here, but once the browser's downloaded those files and stored them in its cache, it won't have to retrieve them over the Internet again. (See the box in Section 2.5.1.)

There's another benefit to using a single external style sheet to load several other style sheets: If you decide later to further divide your styles into additional styles sheets, then you won't have to muck around with the HTML of your site. Instead, just add one more @import directive to that gatekeeper style sheet (see step 2). If you decide to take all the styles related to type out of the main.css file and put them in their own type.css file, then you won't need to touch the Web pages on your site. Simply open the style sheet with all of the @import directives in it and add one more: @import url(type.css) .

This arrangement also lets you have some fun with your site by swapping in different style sheets for temporary design changes. Say you decide to change the color of your site for the day, month, or season . If you've already put the main colordefining styles into a separate color.css file, then you can create another file (like summer_fun.css ) with a different set of colors. Then, in the gatekeeper file, change the @import directive for the color.css file to load the new color style file (for example, @import url(summer_fun.css ).

Tip: Have you ever seen sites that have buttons that let you change the appearance of the site instantly? This is done with several different style sheets and a little JavaScript kung fu. You can find out how the basic concept works here: www.alistapart.com/articles/bodyswitchers/. For the latest and greatest version of the JavaScript required to make this magic, visit www.stuffandnonsense.co.uk/resources/iotbs.html.