Use classes as single-purpose units of style. In practice, this generally means including only one declaration per class.
While a single class can include multiple declarations, e.g.
background:red;color:white;, each additional declaration affects composability and reuse of the rule. Separating this example into two classes,
color:white;, would allow the
color:white; CSS to be reused with other classes such as
Use shorthand properties with caution.
It makes sense, in a way, to apply a class
margin:8px; to the same element as a class
margin-left:0;: You would probably be trying to achieve 8-pixel top, right, and bottom margins; and, in some cases, you may even get the expected result. However, because
margin:8px; sets all margins to the same value (not just undefined ones), the left margin would be reset to 8px if the
margin:8px; rule appeared later in the generated style sheet.
A few options exist to make the above example work consistently, including:
margin-top:8px; margin-right:8px; margin-bottom:8px; margin-left:0;
margin-y:8px; margin-right:8px; margin-left:0;
Write a given style rule as consistently as possible throughout the codebase, avoiding, for example, such classes as
background-color:red; that achieve the same effect in two different ways.
Because each style rule adds bytes to the generated style sheet, inconsistent style can affect the performance of your Web site.