En regardant ce fichier CSS ( en particulier les dernières lignes 5 ): est ce gros fichier CSS est le bon moyen d'écrire des CSS? Je vois ce genre de hiérarchie dans de nombreux sites. Le fichier CSS devrait être petit, pourquoi a-t-il besoin de tous ces sélecteurs redondants? Il est possible d'utiliser uniquement des identifiants qui seront analysés beaucoup plus rapidement, et bien sûr - le CSS sera plus petit. Je pourrais réduire ce fichier CSS par convertir cela en identifiant où je peux. Est-ce que je manque quelque chose?
5 Réponses :
Je conviens que l'ajout d'identifiant (ou de classes) fera l'analyse de CSS plus rapidement.
Le type de code que vous avez affiché dans votre question pourrait très bien être une peau pour un logiciel existant où le développeur de la peau n'a pas la possibilité d'ajouter des identifiants à tous les éléments qu'il souhaite style. Dans ce cas, il faudrait recourir à la hiérarchie pour organiser des articles spécifiques.
mais pour résumer: L'utilisation d'ID ou de classes est effectivement plus rapide et la meilleure façon d'appliquer des styles.
vous avez raison. Ce CSS provenait d'une société tierce qui a conçu notre site. Je crois qu'ils utilisaient de la peau. Donc, vous dites que je devrais changer cette CSS et mettre des identifiants où que je puisse?
Eh bien que tout dépend du temps que vous êtes prêt à dépenser quelque chose qui vous ferait économiser de simples millisecondes. L'utilisation d'ID / classes est plus rapide et j'encouragerais cela dans un nouvel environnement. Mais sauf si vous avez affaire à un énorme fichier CSS qui prend des âges à charger, je garderais des choses comme elles sont. Votre temps d'analyse plus rapide ne serait que légèrement notable, éventuellement de ne pas valoir l'effort.
si vous êtes Utilisez uniquement l'identifiant La sélection serait plus rapide , mais vous devrez également faire plus de sélections que si vous utilisez des cours. À condition que le CSS soit propre. Un problème avec le style de base sur les identifiants en général est que vous rentriez toute la réutilisation de ce style.
La meilleure façon d'aller est de relier le style des classes. Cela vous donne une vitesse adéquate et maintient le fichier CSS plus petit. Les fichiers plus petits sont beaucoup plus importants pour la performance dans la plupart des sites que d'exécution plus rapide sur le client. Les clients typiques rendront une page complexe en microsecondes, une fois que toutes les ressources sont toutes les ressources.
Le CSS que vous soulignez consiste à utiliser un sprite, qui pourrait très bien être généré avec une boussole ou quelque chose de similaire. Il est important de voir le code d'origine aussi avant de faire des jugements durs sur la qualité.
Si la page est plus petite à l'aide de l'ID peut être impulsion. Mais imaginez qu'il existe cinq listes de votre page et chacune dispose de cinq articles de la liste. Ensuite, vous devez définir 5 * 5 ID à utiliser dans CSS. Ce sera un grand texte et ce sera une mauvaise syntaxe. De plus, un élément peut prendre plus d'une classe. Par conséquent, chaque classe peut être utilisée beaucoup de fois (comme héritage dans l'objet orienté objet). Il réduira également la taille du texte CSS et augmentera sa lisibilité.
Je n'ai pas parlé de mettre l'identité à chaque IL. Je veux dire mettre des identités sur le menu et le sélecteur d'enfant d'origine. (>) Je dis simplement que je pourrais supprimer la section Bloody #Page .s_1
Encore une fois, vous devez définir cinq identifiants pour utiliser le premier sélecteur d'enfants. Supprimer la section "# Section" peut être Sensedique mais .S_1 est mieux que # S_1 pour avoir un CSS lisible et de petite taille.
Si vous êtes intéressé, en particulier dans les 5 dernières lignes, la classe La cinquième ligne et les lignes 7-11 (les cinq derniers) référencent le sprite. (Je suis sûr que vous le savez.) Utiliser six lignes pour faire référence à cinq images différentes est aussi efficace que vous allez obtenir. P> En outre, les sprites utilisent généralement des classes car l'image sera déployée dans divers endroits. P> La question de l'efficacité CSS pour ces lignes est de savoir si la référence complète est nécessaire. P>
mise à jour: Ce document Google est inestimable car il explique comment le Le navigateur continue à analyser CSS. En conséquence, il qualifie une partie de
Ce que j'ai écrit ci-dessous. Le navigateur fonctionne à droite à gauche pour chaque sélecteur, alors
Il ne parsa jamais la section Globalement, vous pouvez certainement perdre à tout le moins, vous pouvez sans aucun doute le renvoyer vers les éléments suivants: P> Classe Code> vs ID code> Le débat n'est pas la principale chose ici. page code> strong>. Le problème n'est qu'un seul temps de chargement. P>
blockQuote> Section #Page .s_1 menu LI.B_5 A CODE> pourrait aussi bien être .b_5 a code> si c'est le seul contexte utilisé par le sprite. Je mettrais également la classe sur le code> moi-même, et vous pouvez simplement vous référer à la classe de boutons comme .b_5 code>. Un meilleur nom de classe ne serait pas égaré, ni imo; Les cinq caractères supplémentaires dans Button_5 CODE> ne vont tuer personne :) p> # #page section code> sans perte de exactitude et gains dans la performance. L'utilisation du menu code> est très probablement inutile, aussi. P> * {padding:0; margin:0;} /* Assuming this is already standard */
.s_1 { overflow:hidden; width:435px; float:left;}
.s_1 h1 { font-size:36pt; color:#001744; line-height:1.1; margin-bottom:64px;height:107px;}
.s_1 menu { list-style:none;}
.s_1 li { float:left;}
.s_1 menu li + li {margin-left:10px;}
.s_1 a {background-image:url(../images/icon_buttons.png); background-repeat:no-repeat; width:79px; height:79px; display:block;}
.b_1 { background-position:0 0;}
.b_2 { background-position:-89px 0;}
.b_3 { background-position:-178px 0;}
.b_4 { background-position:-267px 0;}
.b_5 { background-position:-357px 0;}
.s_1 a (le sélecteur descendants) est une très mauvaise décision
@ROYINAMIR OUI. Je repense le * pour le remplissage 0; Marge: 0 car * est apparemment pas si efficace, bien que ce soit une pratique assez standard.
développeur.mozilla.org/en-us/docs/csss/ ...
non . Laissez le * seul ... :-) im en utilisant un fichier de réinitialisation CSS :-)
+1 pour le retrait du dernier ; : -) ..... il est requis uniquement entre les règles. pas à la fin.
@ROYINAMIR GRAND LINK! Je vais traverser mon CSS demain :)
@ROYINAMIR L'autre facteur, bien sûr, est que la mise en œuvre de classes ralentit les recherches basées sur la classe (telles que sur jQuery ) que j'utilise beaucoup. Donc, je suis heureux de porter quelques sélecteurs descendants :)
Ouais. Soyez certain que de vous rappeler que les mêmes sélecteurs peuvent être meilleurs dans IE VS Chrome, mais certains autres sélecteurs peuvent être meilleurs dans Chrome VS, c'est-à-dire. (Mieux je veux dire par plus vite)
Utiliser de Mozilla dev ,
Utilisez la catégorie la plus spécifique possible
La principale cause de ralentissement est trop importante dans la balise
Catégorie. En ajoutant des cours à nos éléments, nous pouvons davantage subdiviser
ces règles en catégories de classe, qui élimine le temps passé à essayer
Pour faire correspondre des règles pour une balise donnée.
Voici un Bonne recherche sur cette sujet, qui stipule cela aussi.
Les sélecteurs les plus chers ont tendance à être universels ("*"), et ceux
Avec plusieurs classes (".foo.bar", "foo .bar.baz qux", etc.). Nous
Je le savais déjà, mais c'est bien d'obtenir la confirmation des profilers.
ID S sera beaucoup plus rapide en termes de CSS analyse.
Ont un look ici
@Pranavkapoor ouais je l'ai déjà vu. Il est dit " La principale cause du ralentissement est trop importante dans la catégorie des tags ". Mais gagnez, je le vois dans beaucoup de sites. Je voulais juste savoir si je ne manque pas quelque chose
@downvoter - merci. (Pour le vote en bas avec (OUT) expliquant votre raison)
Upvoting .. juste pour contrer le bowvote sans commentaire ..
@ROYINAMIR: Je suppose que c'est pour la maintenabilité. Personne ne veut écrire beaucoup de
ID .@Pranavkapoor Je préfère écrire des identifiants (pour les 5 dernières lignes) plutôt que le fichier CSS plus grand ... Non? (Veuillez considérer cette question comme un conflit de mégasite POV)
@ROYINAMIR YUP,
ID ci-dessus a plus de sens. Je l'envisageons de manière générale.@ROYINAMIR: Je suppose généralement que Google prend des performances très au sérieux et la source de la source de style inline, elle semble utiliser principalement une seule classe
classe ouid sélecteurs@Pranavkapoor Voulez-vous dire - CSS de Google?
@ROYINAMIR: Oui, Google.com
@Pranavkapoor Ouais, je l'ai aussi péléps et ils utilisent un style inline avec de nombreux identifiants! (peut-être 3% des éléments en cascade ....)
FYI Consultez ce lien: "Vous devriez styles presque tout avec des cours ... Les classes sont nos amis. Voir beaucoup d'identifiants est en fait très mauvais." Stubnbornella.org/Content/2011 / 04/28 / ...
@NICK Vous n'avez pas compris l'article. Cela ne dit pas de ne pas utiliser les identifiants, mais dire n'utilisez pas d'utilisation de Neted IDE's comme
#Barbar #Accounts #AccountDétails H3 {} . Selon mon expérience. Nous devons des classes utilisateur lorsque nous devons regrouper des éléments pour appliquer le style pendant que l'ID doit être spécifique. Exemple: vous avez 5 espaces et ils ont tous une classe appelée: .Notselected. Si vous appuyez sur une plage, vous mettez la classe de .selected. Si vous appuyez sur une autre portée, vous enlevez .s Sélection et mettez-le sur un autre.Ce que vous dites est vrai et j'utilise cette technique moi-même. Le point profond que Nicole faisait, cependant, concernait la "spécificité" et non seulement des identifiants imbriqués. (Il est clair que dans les diapositives de conversation.) Elle affirme que (1) bien que une recherche d'identité soit toujours plus rapide qu'une recherche de classe (comme nous le savons tous les deux), (2) prenant une approche d'identification peut vous faire un problème à grande échelle. projet. Vous gagnez la bataille mais perdez la guerre. Comme elle le dit dans l'une des dernières diapositives, "garde la spécificité aussi bas que possible." Vous pourriez être nettement d'accord, mais ce n'est pas le cas que je n'ai pas compris ce qu'elle disait :)
@Nick ouais. désolé merci.