How clean is this mustache template for a listing page? 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}}
  &lt;div class="lab"&gt;
    &lt;h4&gt;{{{lab}}}&lt;/h4&gt;
    &lt;p&gt;
      {{#stadt}}
        &lt;span&gt;&lt;i class="fa fa-building-o"&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;{{{stadt}}}&lt;/span&gt;
        &lt;br /&gt;
      {{/stadt}}

      {{#telefon}}
        &lt;span&gt;&lt;i class="fa fa-phone"&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;{{{telefon}}}&lt;/span&gt;
        &lt;br /&gt;
      {{/telefon}}

      {{#webseite}}
        &lt;span&gt;&lt;i class="fa fa-desktop"&gt;&lt;/i&gt;&lt;/span&gt;
        &lt;span&gt;
          &lt;a href="http://{{{webseite}}}" target="_blank"&gt;{{{webseite}}}&lt;/a&gt;
        &lt;/span&gt;
      {{/webseite}}
    &lt;/p&gt;
  &lt;/div&gt;
{{/labs}}


Here is some of the JSON file:

{ "labs" : [
{ 
    "lab":"Ri&amp;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 &lt;p&gt; tag, or should I consider placing each value in its own &lt;div&gt;?
By using excessive markup for presentational purposes, the template is the exact opposite of clean.

&lt;span&gt;&lt;i class="fa fa-phone"&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;{{{telefon}}}&lt;/span&gt;&lt;br /&gt;


vs.

&lt;span class="fa fa-phone"&gt;{{{telefon}}}&lt;/span&gt;
&lt;!-- span set to `display: block` with a `:before` pseudo element to contain the icon --&gt;


If you're not able to do this because of a library you're depending on, my recommendation is to find a better library.

By moving away from tables, you've committed a sin that's just as bad as using tables for layout:  you're using non-tabular markup for tabular data.  It is understandable that you don't want it to look like a table (either for aesthetic or responsive reasons), but tables don't have to look like tables any more than a list has to look like a list.

Go back to using tables and make adjustments to your CSS instead:

http://jsfiddle.net/SGK8Q/

What the markup should end up looking similar to this:

&lt;table&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;Lab&lt;/th&gt;
            &lt;th&gt;Contact&lt;/th&gt;
            &lt;th&gt;Phone&lt;/th&gt;
            &lt;th&gt;Website&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;

    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td class="name"&gt;ABC&lt;/td&gt;
            &lt;td class="contact"&gt;Johnny&lt;/td&gt;
            &lt;td class="phone"&gt;555-1234&lt;/td&gt;
            &lt;td class="url"&gt;http://abc.example.com/&lt;/td&gt;
        &lt;/tr&gt;

        &lt;tr&gt;
            &lt;td class="name"&gt;DEF&lt;/td&gt;
            &lt;td class="contact"&gt;Billy&lt;/td&gt;
            &lt;td class="phone"&gt;555-1234&lt;/td&gt;
            &lt;td class="url"&gt;http://def.example.com/&lt;/td&gt;
        &lt;/tr&gt;

        &lt;tr&gt;
            &lt;td class="name"&gt;GHI&lt;/td&gt;
            &lt;td class="contact"&gt;Dave&lt;/td&gt;
            &lt;td class="phone"&gt;555-1234&lt;/td&gt;
            &lt;td class="url"&gt;http://abc.example.com/&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;


The CSS:

table, tbody, tr, td, th {
    display: block;
}

thead {
    display: none;
}

/* everything past here is optional */
tr + tr {
    margin-top: 1em;
}

.name {
    font-size: 1.2em;
    font-weight: bold;
}

.url {
    color: blue;
    text-decoration: underline;
}