Best practices - CSS Quick Syntax Reference Guide - page 101

Chapter 26

Best practices

You now have an understanding of the fundamentals of CSS. This final chapter takes a
step back to look at good coding practices and standards for style sheet development.
Following these guidelines can help you write robust CSS code that is easy to maintain,
reuse, and extend upon.

Reusable code
A key idea to a manageable style sheet is to avoid duplicate code. Classes help achieve
this goal because they are reusable and can be combined in different ways, giving you a
flexible design that is easy to evolve.
Any time you find page items that share style properties, you should consider
combining those repeating patterns. This makes it easier to reuse and update the code as
well as to maintain style consistency on the site. Consider the following simple example:

.module {
width: 200px;
border: 1px solid #ccc;
border-radius: 3px;
}
.widget {
width: 300px;
border: 1px solid #ccc;
border-radius: 3px;
}

These classes have two styles in common that can be moved into a third class to
avoid unnecessary repetition. This process makes the classes more generic and therefore
more reusable.

.box-border {
border: 1px solid #ccc;
border-radius: 3px;
}
.module { width: 200px; }
.widget { width: 300px; }