Gardez la sémantique et les choses via le css

Question

Travaillant simplement sur un moteur de vue Spark ASP.Net MVC code. Exemple simplifié (mais j'ai probablement écrit la même chose plusieurs fois dans un style similaire). Il suffit de faire de la pensée ..

<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> 

Ensuite, je suis tenté d'ajouter

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

(d'accord, il pourrait être plus propre que ci-dessus avec l'accessibilité etc ..), mais dans ce sens. Mais cela ne me semble pas très sémantique, et cela réduit également la possibilité de réutilisation si je réutilise un modèle HTML similaire dans un projet différent avec des CSS/UI différents.

Im réellement tenté ... donné en mode non JS en lecture seule est très bien, pour ajouter dynamiquement des contrôles d'édition aux éléments à la page prêt. Serait-ce un péché cardinal?

Answer 1

Oui, ajouter une fonctionnalité avec JavaScript qui n'est pas présent sans elle, et qui est nécessaire pour utiliser l'application est un péché cardinal. Ce n'est pas la fin du monde, mais vous allez aller en enfer :) (surtout s'il n'y a pas de bonne raison de le faire autre que la paresse du développeur)

En ce qui concerne l'interface utilisateur et le balisage, je mettrais le "actions" comme un seul <li> (au même niveau que les autres informations de l'utilisateur), mais comme leur propre <ul>. Cela indique qu'ils sont tous du même genre (actions), mais qu'il y en a une liste.

Bien sûr, s'il n'y en a qu'un seul, alors vous n'auriez pas besoin du <ul> et vous pourriez simplement mettre l'action à ce niveau.

Voici un exemple de ce que je veux dire:

<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>