Quelle est la meilleure façon de nommer les règles css?

Question

De nombreux appels ajax signifient que vous obtenez du contenu de différentes vues de modèles. Dans ce cas, certains identifiants pourraient être répétés. Donc, je me demande à propos de la meilleure logique comment nommer les règles de style. Je choisis actuellement entre deux options:

• Ajoutez un préfixe à chaque ID. Chaque sélecteur ressemblera à # templateName-idName
• Envelopper chaque modèle dans un div avec l'ID du modèle. Ainsi, chaque sélecteur commencera par #templateName #idName

Quelle est votre opinion à ce sujet. Est-ce une bonne idée de séparer absolument chaque identifiant avec un préfixe?

Answer 1

L'utilisation d'une forme de préfixe d'espace de noms pseudo est une bonne idée pour éviter les collisions. Du point de vue de CSS, vous devriez essayer de créer des règles de style plus réutilisables/cohérentes, et donc généralement éviter l'utilisation d'identifiants pour quelque chose de plus que les éléments structurels du site et un correctif. Une combinaison de marqueurs de classe/id explicites et de sélecteurs combinatoires devrait conduire à des feuilles de style plus claires et plus maintenables. En ce qui concerne les ids, cela rendrait la convention # container-child combinée préférable pour la raison initiale de l'espace de nom et également pour souligner et profiter de l'unicité des identifiants.

Answer 2

En général, quand je fais AJAX lourd, je les règles suivantes:

La plupart des scénarios, je ne vais mettre à jour un endroit le « contenu ». Si j'ai des appels sous Ajax qui ont besoin de mettre à jour des widgets etc., ceux-ci ne doivent pas nécessairement être des idées uniques. Vous pouvez tirer parti d'autres éléments du DOM comme ajouter ou insérer après, etc ...

Answer 3

Que diriez-vous d'utiliser des ID et des classes ensemble? Quelque chose comme:

HTML:

<div id="templateOne" class="content"> 
    <!-- content --> 
</div> 
<div id="templateTwo" class="content"> 
    <!-- content --> 
</div> 

CSS:

#templateOne.content { /* styles */ } 
#templateTwo.content { /* styles */ }