This was our old site that I am redesigning.Someone else hardcoded with inline CSS and javascript in tables. I wanted to make it dynamic, so I added Mustache and made this template:{{#labs}}  <div class=lab>    <h4>{{{lab}}}</h4>    <p>      {{#stadt}}        <span><i class=fa fa-building-o></i></span><span>{{{stadt}}}</span>        <br />      {{/stadt}}      {{#telefon}}        <span><i class=fa fa-phone></i></span><span>{{{telefon}}}</span>        <br />      {{/telefon}}      {{#webseite}}        <span><i class=fa fa-desktop></i></span>        <span>          <a href=http://{{{webseite}}} target=_blank>{{{webseite}}}</a>        </span>      {{/webseite}}    </p>  </div>{{/labs}}Here is some of the JSON file:{ labs : [{     lab:Ri&szlig;mann Zahntechnik GmbH,    stadt:D-06917 Jessen,    telefon:+49 (0) 3537 21 38 61,    webseite:www.rissmann-zahntechnik.de  },Would it make a big enough difference to not have the full word as the name?  So maybe like l instead of lab and w instead of webseite, etc.Here is the result of the listings:The even spacing between the icon and the values was achieved by this CSS rule:.lab i { width: 27px; }Also, does it make sense to have it in a single <p> tag, or should I consider placing each value in its own <div>?
How clean is this mustache template for a listing page?
javascript;css;json;template;mustache