Suggested BP for BP2: Make good use of css to minimize HTML.

Another one for the pot:

BP: Avoid overuse of nested css classes that can bloat repeated blocks of
content. Instead, make good use of selectors to minimize the size of
repeated blocks of HTML. Bear in mind that css is easier to cache than
generated HTML pages.

e.g.

This...
*
style.css*
.contact > div { float:left; }
.contact > div > img { border:1px solid #ccc; padding: 3px; }
.contact > ul { padding-top:3px; }
.contact > ul > li { font-weight:bold; }
.contact > ul > li:first-child + li { color:#777; font-weight:normal; }
*
content.html*
<li class="contact">
  <div><img src="#" alt=""></div>
  <ul><li>name</li><li>status</li><li>address</li></ul>
</li>

Is much more compact than this... (if the element of HTML content is some
repeated block, e.g. contact, stock entry, orders, etc)

*style.css
*.thumbnail { float:left }
.mountedimage { border:1px solid #ccc; padding:3px; }
.details { padding-top:3px; }
.name { font-weight:bold; }
.status { color:#777; }
.address { font-weight:bold; }
*
content.html*
<li>
  <div class="thumbnail"><img class="mountedimage" src="#'" alt=""/></div>
  <ul class="details"><li class="name">name</li><li
class="status">status</li><li class="address">address</li></ul>
</li>