Keep semantic and things mullable via css

Just working on some Spark view engine ASP.Net MVC code. Simplified example (but I've probably written same thing a few times over in similar style). Just doing of thinking..

<content name="main">
      <ul>
      <for each="var userViewModel in ViewData.Model">
        <li>
          <ul>
            <li>${userViewModel.Identity}</li>
            <li>${userViewModel.Name}</li>
            <li>${userViewModel.Email}</li>
              <!-- about to add here -->
          </ul>
        </li>
      </for>
    </ul>
</content>

Next I'm tempted to a开发者_高级运维dd

    <li>
<button class="edit-item-button">Edit</button>
    <button class="confirm-delete-item-button">Delete</button>
    </li>

(okay it might be cleaner than above with accessibility etc..) but along those lines. But this doesn't seem very semantic to me, and also reduced mullable-ness should I reuse a similar HTML template in a different project with different CSS/UI.

Im actually tempted... given in non JS mode read-only is fine, to dynamically add edit controls to items on page ready. Would this be a cardinal sin?

Yes, adding functionality with JavaScript that is not present without it, and that is required to use the application is a cardinal sin. It isn't the end of the world, but you will go to hell :) (especially if there is no good reason to do so other than developer sloth)

In regards to the UI and markup, I would put the "actions" as a single <li> (at the same level as the other user info), but as their own <ul>. This indicates that they are all the same sort of thing (actions), but that there is a list of them.

Of course, if there is only one, then you wouldn't need the <ul> and could just put the action at that level.

Here's an example of what I mean:

<content name="main">
      <ul>
      <for each="var userViewModel in ViewData.Model">
        <li>
          <ul>
            <li>${userViewModel.Identity}</li>
            <li>${userViewModel.Name}</li>
            <li>${userViewModel.Email}</li>
            <li>
              <ul>
                <li><button class="edit-item-button">Edit</button></li>
                <li><button class="confirm-delete-item-button">Delete</button></li>
              </ul>
            </li>
          </ul>
        </li>
      </for>
    </ul>
</content>