W3C home > Mailing lists > Public > public-bpwg@w3.org > February 2008

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

From: Adam Connors <adamconnors@google.com>
Date: Fri, 29 Feb 2008 13:45:53 +0000
Message-ID: <393b77970802290545o376b1537g4ff9d9f8e099a702@mail.gmail.com>
To: "MWI BPWG Public" <public-bpwg@w3.org>
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>
Received on Friday, 29 February 2008 13:46:14 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 19:08:55 UTC