Je voudrais créer une meilleure compréhension du moment où il convient d'utiliser des classes pour cibler le contenu, par opposition à d'autres options disponibles, notamment des sélecteurs de descendants.
Dans de nombreux cas, au lieu d'utiliser des classes, il est possible de Utilisez les sélecteurs de descendants pour cibler les mêmes éléments. Si la même chose peut être accomplie de la même manière, quelle est la logique entre décider une option? P>
Voici quelques exemples de scénarios: p>
1. P>
A . p> b. p> 2. p> a. p> <div class="main">
<div class="content">
<div></div>
<div></div>
<div></div>
</div>
</div>
.content div
3 Réponses :
Tout dépend du reste de votre balisage. Considérez cette version modifiée de votre sélecteur Il existe plusieurs façons de sélectionner les mêmes éléments avec CSS, pas seulement un «correct». Il n'est généralement pas recommandé d'être trop spécifique, mais des sélecteurs trop généraux peuvent également causer des problèmes. Vous devez trouver un équilibre et vous n'obtenez-vous que en pratiquant, il n'y a pas de recette. 1.A exemple: .Main> div> div choisirait les deux divs, qui peuvent ou peut ne pas être ce que vous voulez. Donc, parfois, vous devez être plus spécifique, ajouter des classes et des identifiants au balisage et modifier les sélecteurs en conséquence.
Merci pour la réponse, mais vous avez surtout répondu de la même manière vague que je lis dans de nombreux articles en disant «déterminer ce qui fonctionne mieux» sans dire comment comprendre ce qui est meilleur, quelle logique à suivre. Juste hors de curiosité, pour le marquage exact dans mes exemples, pouvez-vous me donner vos choix et les motiver?
@jsgroove Je soupçonne que vous n'allez pas avoir une réponse définitive ici car il existe de nombreuses tâches à prendre en compte, les performances (les sélecteurs de descendants sont plus lents que ID ou Classe ), code Maintenabilité (certains avocats n'utilisant jamais les sélecteurs descendants), etc. Jetez des préférences personnelles et des opinions largement variables.
Pour le balisage exact dans vos exemples, j'utiliserais les mêmes sélecteurs que vous avez faits. Désolé si je ne peux pas être plus précis, c'est juste qu'il n'y a pas de formule pour cela. Vous devez connaître vos options et outils et vous interroger sur les avantages et les inconvénients de chaque option. Vous semblez être sur le bon chemin!
@bfavaretto Désolé si je ne devais pas effacer, je voulais dire quelle option, A ou B utiliseriez-vous dans chacun des 3 exemples si le balisage dans la
@jsgroove Je ne peux pas croire que je suis ignoré que :) Je préfère habituellement l'option b sur les trois cas. J'essaie d'utiliser des noms de classe qui indiquent clairement le rôle de l'élément, il est donc plus facile de lire mes fichiers CSS et JS. J'ai tendance à laisser des sélecteurs descendants et des pseudoclasses comme Nth-enfant pour le balisage que je ne m'attends pas à changer beaucoup pendant le développement.
@BFavaretto Merci, je préfère généralement utiliser des cours aussi, il a l'air plus clair lorsque vous regardez par-dessus le code et plus facile à travailler avec plus tard.
Les sélecteurs de descendants vous permettent d'éviter toute intégration des informations de classe dans votre HTML. Cela peut être pratique lorsque le bloc d'emballage est un conteneur logique. Par exemple, si vous avez construit une table à l'aide d'étiquettes div code> et que vous avez des centaines, ou des milliers, de lignes, vous pouvez potentiellement réduire la taille de votre document et augmenter la lisibilité, en spécifiant un style descendant au lieu de spécifier Class = '...' Code> à plusieurs reprises. <div class='mytable'>
<div></div>
<div></div>
<!-- A LOT MORE ROWS -->
</div>
Pas seulement les combinaisons descendants, mais tous les sélecteurs contextuels d'ici la matière.
Pour que la conversation commence sur le bon pied Checkout Qu'est-ce qu'une bonne stratégie CSS? . Personnellement, je pense que les stratégies de @ Gregnostic devraient être renommées de domaines.
Comme je le vois, chaque projet avec plus d'une douzaine de pages Web doit vraiment mettre en œuvre les différents domaines à certains degrés en fonction de leur portée.
Les domaines ici sont (commandés par spécificité):
tente de réaliser une base de référence entre navigateurs et conditions environnementales. Rendu célèbre par Eric Meyer . Beaucoup de gens sautent sur cela comme un problème résolu, mais comme une personne qui travaille sur un système de gestion de contenu de page, croyez-moi que la réinitialisation CSS est importante et peut être un problème difficile à résoudre gracieusement (ESP. Si le client utilise le même Bibliothèque thématique comme vous le souhaitez).
Ces sélecteurs doivent être aussi généraux que possible. La cueillette basée sur les classes CSS n'a généralement aucun sens, sauf, à l'occasion, lorsque vous besoin pour réinitialiser à l'intérieur d'une coque donnée. Les structures de pages potentielles, souvent gérées par un système de grille de quelque sorte. Celles-ci devraient être un peu plus spécifiques, mais devraient compter sur une sorte de motif récursif. Quelque chose comme: Bien que cela puisse être effectué avec la sélection de balises, je trouve que cela n'a presque jamais intuitif pour la personne suivante et que vous vous retrouvez toujours avec un J'ai tendance à être très spécifiques sur ceux-ci. L'un de mes modèles préférés pour cela est Stebornella's OOCSS . Le concept de base est que pour minimiser le code dupliqué, vous apportez des attributs à l'intérieur de divers sélecteurs CSS et faites de votre mieux pour les faire jouer agréable. Un exemple simple de ceci est Twitter Bootstrap 'S. Pendant que vous pourriez être capable de vous fudger dans des sélecteurs d'enfants ici, je vous recommande vivement de changer comme la première fois que quelqu'un veut changer: à: le général général: sera totalement en conflit avec: Cependant, si vous changez bouton sur Manipulation de l'affichage approprié de différentes polices dans des conditions données. Je gère toujours ce sélecteur d'élément dans la mesure du possible. Je commence habituellement avec quelque chose comme: en fonction de la nécessité du client, je pourrais même ajouter des règles pour les couvre-mains à l'intérieur des boutons. Tout comme la typographie La boîte à outils Dojo a de bons exemples de mise en place de thèmes comme une couche séparée (caisse nihilo ). Ils ont tendance à voir les cours ici, mais c'est principalement pour la réévaluation, que j'ai déjà discuté. Le tiroir indésirable de CSS, espérons que la majeure partie de celle-ci est contenue dans Je les fais vraiment spécifiques, car la dernière chose que vous voulez, c'est changer la règle une règle comme: sur un site presque complet. Dans la mesure du possible, je les ai mis dans une zone de "héritage" de travail. Disposition
grille apparaître comme par magie au mauvais endroit. L'utilisation de classes aide à garder le tiroir défiant tm plus petit. Pour une mise en œuvre à pleine échelle, voir:
Composant / fonctionnel
.bn , vous pouvez simplement déplacer cela vers la portée ou juste laissé. Typographie
Thème
Drawer Junk
, mais chaque projet le comporte et ils devraient aller en dernier. Garder cette vide est une priorité, mais ce n'est pas aussi important que de faire le travail (quelque chose que je continue à essayer de me rappeler). Notes de fermeture
+1 bonne réponse. J'ajouterais, en utilisant une méta-language ( Sass est ce que j'ai réglé) m'a donné) La capacité d'organiser et de ne pas me répéter moi-même et Je n'ai pas à litière mon balise avec des noms de classe non sémantique.
phrogz.net/css/howtodevelopwithcss.html#contextuelectors (voir la note commençant par " ... mais ne comptez pas trop sur le balisage ")