Best practices when using Hacss
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
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
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
rule appeared later in the generated style sheet.
A few options exist to make the above example work consistently, including:
- Merging the rules, which would guarantee their application in the correct
- Avoiding the shorthand property altogether:
- Using a more explicit form of the shorthand property:
- Applying postcss-axis or similar to
the Hacss-generated style sheet to enable more selective shorthand properties
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.