Grouping CSS Techniques

To reduce the size of your CSS and easily manage common techniques, group the main declarations of each technique together, in a single rule. I often do this with the Phark image replacement technique, for that I have the following general rule:

.phark, h1 a, ul#navigation li a {
  overflow: hidden; display: block;
  text-indent: -9999px; font-size: 0.0; line-height: 0.0; text-decoration: none;
  background: transparent no-repeat 0 0;
}

Then for each selector I want the image replacement to affect you only need to add width, height and background-image as a separate rule, as well as adding the selector to the general rule.

h1 a {
  width: 250px; height: 50px;
  background-image: url(path/to/logo.png);
}
ul#navigation li a {
  width: 100px; height: 15px;
  background-image: url(path/to/navigation.png);
}

This idea can be applied to other techniques such as the Easy Clearing method and for accessibly hiding elements.