Si mes définitions de la feuille de style reflètent la hiérarchie DOM? Si j'ai:
#container .item .property { color: red;}
5 Réponses :
Je fais toujours la seconde. Il aide
moi gardez une trace de mon code et où les choses sont dans l'héritière
d'autres autres lire plus facilement et modifier mon code
avec la spécificité, car il est plus facile de cibler les problèmes.
plus, je peux tirer parti du bit en cascadeur de CSS en ciblant des éléments plus facilement.
En fait, je voudrais même aller plus loin que
et ajouter les éléments trop
Il est clarté dans cette méthode ... comme je peux dire quels éléments reçoivent quelle classe ou quelle carte d'identité.
En outre, cela me permet d'utiliser des noms de classe pour d'autres éléments. #Container .item .Property {couleur: rouge;}
div # conteneur div.item div.property {couleur: rouge;}
Je dirais plus de 95% du temps. ;-)
Je ne vois pas beaucoup de point dans l'ajout des noms d'élément HTML. J'avais l'habitude de faire cela, mais à moins que l'étiquette HTML ne soit réellement pertinente (c'est-à-dire si vous aviez un avec une classe de , vous Voulez-vous recevoir ces styles), puis je pense que c'est un poids mort. De plus, vous ajoutez une spécificité qui rendra plus difficile la remplacement de ces styles si vous en avez besoin.
Merci @paul. Pour moi, ajout de la spécificité et assurez-vous que les noms de classe ne sont pas des conflits sont deux raisons pour lesquelles je préfère cette méthode.
S'assurer que les noms de classe ne sont pas en conflit? Voulez-vous dire que vous aimez être capable d'avoir un ensemble de styles pour et un autre ensemble de styles pour
Exactement. Cela arrive parfois, surtout lorsque vous utilisez le code des autres personnes. Je travaille pour un grand org gobelet et nous mettons souvent en œuvre des modèles où nous n'avons aucun contrôle sur le maître CSS.
Oh d'accord. Si vous utilisez d'autres CSS que vous ne contrôlez pas, c'est problématique. J'aurais pensé que avoir des styles différents pour la même classe appliquée à différents éléments HTML pourrait être déroutant à long terme. (Je n'ai pas beaucoup essayé moi-même - évidemment tout dépend du contexte.)
?
Ceci est totalement à vous, vous n'avez pas besoin d'utiliser le chemin complet de CSS, Mais en utilisant un chemin complet peut être utile lorsque vous avez 2 div avec la même classe Mais différents parents et vous voulez les styles différemment.
Comme avec n'importe quel code (ou n'importe quel écriture), vous devez l'écrire pour exprimer votre sens voulu clairement et précisément que possible.
Donc, si vous voulez un élément avec une classe de Si vous voulez un élément avec une classe de Une chose que je constaterais, c'est que chaque sélecteur CSS que vous ajoutez augmente la spécificité du sélecteur, c'est-à-dire Propriété c'est un descendant d'un élément avec la classe de élément qui est un descendant d'un élément avec un identifiant de conteneur pour avoir ces styles, puis écrivez #Container .item .property .
Propriété pour avoir ces styles, peu importe ce que c'est un descendant de, puis écrivez .property . Ceci est approprié pour les classes que vous souhaitez utiliser dans de nombreux endroits différents sur le site; par exemple. Styles de boutons.
#Container .item .Property est plus spécifique que .property . Donc, les styles appliqués avec #Container .item .Property nécessiteront un sélecteur de spécificité plus spécifique pour les remplacer si vous voulez plus tard, vous forcer à écrire ce sélecteur plus long. Mais je pense que c'est une préoccupation secondaire comparée à la rédaction de ce que vous voulez dire.
Si vous utilisez les mêmes styles ailleurs dans l'autre hiérarchie, vous devriez dire juste mais si vous essayez de spécifier le style uniquement pour la hiérarchie actuelle, vous devez fournir un chemin complet. . Par exemple, vous avez un tel DOM: puis le style pourrait ressembler à ceci:
Je suis d'accord avec la réponse choisie (qui est excellente), mais je tiens à ajouter que vous ne devez être que aussi précis que nécessaire. Cela garantit que vous pouvez remplacer avec plus de spécificité si nécessaire. Si vous êtes toujours très précis, vous manquez de façons de remplacer les styles.
Si vous êtes intéressé, l'ordre de spécificité est le suivant: p>
ID (100 points), .Classes * ( 10 points), éléments (1 point). P>
* y compris des pseudo-classes p>
Les scores du moteur CSS pour chaque sélecteur que vous utilisez sur la base de quels niveaux de spécificité sont présents. P>
ul.menu li a = ((1 + 10) + 1 + 1) = 13 #widget ul.menu = (100 + (1 + 10)) = 111 points #widget ul.menu li = 112 points #widget ul.menu li#home = 212 points #widget ul.menu li#home a = 213 points body #widget ul.menu li#home a#homeLink = 313 points (High-score FAIL!)