recherche
Maisoninterface Webtutoriel CSS12 conseils pour l'optimisation du code CSS_Experience Exchange

1.Règles d'ID
2.Règles de classe
3. Règles de balise
4 Règles générales
La compréhension générale de l'efficacité vient de "High-Performance Website Construction" publiée par Steve Souders dans. 2009 À partir du « Guide avancé », bien que le livre le répertorie plus en détail, vous pouvez également consulter la liste de référence complète ici, ou vous pouvez consulter plus de détails dans les « Meilleures pratiques pour des sélecteurs CSS efficaces » de Google.
Dans cet article, je souhaite partager quelques exemples simples et directives que j'utilise pour écrire du CSS haute performance. Ceux-ci s’inspirent du guide pour un CSS efficace écrit par MDN et suivent un format similaire.

1. Évitez les contentions excessives

Une règle générale, n’ajoutez pas de contraintes inutiles.

Copier le code Le code est le suivant :

// Oups
ul#someid {.. }
.menu#otherid{..}

// D'accord
#someid {..}
#otherid {..}

2. Le sélecteur descendant est le pire

Non seulement les performances sont faibles, mais le code est également fragile. Le code html et le code css sont sévèrement couplés. La structure du code HTML change, le CSS doit également être modifié. C'est grave, surtout dans les grandes entreprises, les personnes qui écrivent du HTML et du CSS ne sont souvent pas les mêmes.

Copier le code Le code est le suivant :

// C'est nul
html div tr td {..}

3. Évitez les sélecteurs de chaîne (intersection)

Ceci est similaire à la situation de surcontrainte. Une approche plus judicieuse consiste simplement à créer un nouveau sélecteur de classe CSS.

Copier le code Le code est le suivant :

// Oups
.menu. left.icon {..}

// Ok
.menu-left-icon {..}

4. Adhérez au principe KISS

Imaginez que nous ayons le DOM suivant :

Copier le code Le code est le suivant :


Voici les règles correspondantes...

Copiez le code Le code est le suivant :

// Oups
#navigator li a {..}

// D'accord
#navigator {..}

5. Utilisez la syntaxe composée (compacte)

Utilisez la syntaxe composée autant que possible.

Copier le code Le code est le suivant :

// Oups
.someclass {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
background: #000;
background-image : url( ../imgs/carrot.png);
background-position: bottom;
background-repeat: répétition-x;
}

// D'accord
. someclass {
remplissage : 20px 10px 20px 10px;
arrière-plan : #000 url(../imgs/carrot.png) répéter-x bottom;
}

6. Évitez les espaces de noms inutiles

Copiez le code Le code est le suivant :

// Oups
.someclass table tr.otherclass td.somerule {..}

//Okay
.someclass .otherclass td.somerule {.. >

7. Évitez les répétitions inutiles

Combinez autant que possible les règles répétées.

Copier le code Le code est le suivant :

// Oups

.someclass {
couleur : rouge;
fond : bleu;
taille de police : 15px;
}

.otherclass {
couleur : rouge;
fond : bleu;
taille de police : 15px;
}

// D'accord

.someclass, . otherclass {
couleur : rouge;
fond : bleu;
taille de police : 15px;
}

8. Rationalisez les règles autant que possible.
Sur la base des règles ci-dessus, vous pouvez fusionner davantage les règles répétées dans différentes catégories.
Copier le code Le code est le suivant :

// Oups
.someclass {
couleur : rouge;
fond : bleu;
hauteur : 150px;
largeur : 150px;
taille de police : 16px;
}

.otherclass {
couleur : rouge;
fond : bleu;
hauteur : 150px;
largeur : 150px;
taille de la police : 8px;
}

// Okay
.someclass, .otherclass {
couleur : rouge;
fond : bleu;
hauteur : 150px;
largeur : 150px;
}

.someclass {
taille de police : 16px;
}

.otherclass {
taille de police : 8px;
}

9. ambiguïté La convention de dénomination de
est préférable d'utiliser des noms sémantiques. Un bon nom de classe CSS doit décrire ce qu'elle est plutôt que ce à quoi elle ressemble.
10. Évitez !importants
En fait, vous devriez également pouvoir utiliser d'autres sélecteurs de haute qualité.

11. Suivre un ordre de déclaration standard

Bien qu'il existe des méthodes courantes pour organiser l'ordre des propriétés CSS, vous trouverez ci-dessous une méthode populaire que je suis.

Copier le code Le code est le suivant :

.someclass {
/* Positionnement */
/* Modèle d'affichage et de boîte */
/* Styles de fond et de typographie */
/* Transitions */
/* Autre */
}

12. Format de code bien organisé
La lisibilité du code est directement proportionnelle à la facilité de maintenabilité. Vous trouverez ci-dessous la méthode de formatage que je suis.
Copier le code Le code est le suivant :

// Oups
.someclass- a, .someclass-b, .someclass-c, .someclass-d {
...
}

// D'accord
.someclass-a,
.someclass- b,
.someclass-c,
.someclass-d {
...
}

// Bonne pratique
.someclass {
background-image :
Dégradé linéaire ( #000, #ccc),
Dégradé linéaire (#CCC, #DDD) ;
Ombre de boîte :
2px 2px 2px #000,
1px 4px ; 1px 1px 1px #ddd encart ;
}

Évidemment, ce ne sont là que quelques règles que j'essaie de suivre dans mon propre CSS afin d'être plus efficace et maintenable. Si vous souhaitez en savoir plus, je vous recommande de lire le Guide de MDN pour écrire du CSS efficace et le Guide de Google pour optimiser le rendu du navigateur.

Déclaration
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Les astuces CSS perdues de Cohost.orgLes astuces CSS perdues de Cohost.orgApr 25, 2025 am 09:51 AM

Dans cet article, Blackle Mori vous montre quelques-uns des hacks trouvés tout en essayant de repousser les limites du support HTML de Cohost. Utilisez-les si vous osez, de peur que vous soyez également étiqueté un criminel CSS.

Style CSS de niveau supérieur pour les curseursStyle CSS de niveau supérieur pour les curseursApr 23, 2025 am 11:04 AM

Les curseurs personnalisés avec CSS sont excellents, mais nous pouvons faire passer les choses au niveau supérieur avec JavaScript. À l'aide de JavaScript, nous pouvons passer entre les états du curseur, placer du texte dynamique dans le curseur, appliquer des animations complexes et appliquer des filtres.

Worlds Collide: Détection de collision de l'ordre clé à l'aide de requêtes de styleWorlds Collide: Détection de collision de l'ordre clé à l'aide de requêtes de styleApr 23, 2025 am 10:42 AM

Les animations CSS interactives avec des éléments se ricochent semblent plus plausibles en 2025. Bien qu'il soit inutile de mettre en œuvre Pong dans CSS, la flexibilité et la puissance croissantes de CSS renforcent le soupçon de Lee selon lequel un jour, ce sera un jour

Utilisation du filtre de fond CSS pour les effets d'interface utilisateurUtilisation du filtre de fond CSS pour les effets d'interface utilisateurApr 23, 2025 am 10:20 AM

Conseils et astuces sur l'utilisation de la propriété CSS Back-Filter pour styliser les interfaces utilisateur. Vous apprendrez à superposer des filtres en toile de fond entre plusieurs éléments et à les intégrer à d'autres effets graphiques CSS pour créer des conceptions élaborées.

Smil sur?Smil sur?Apr 23, 2025 am 09:57 AM

Eh bien, il s'avère que les fonctionnalités d'animation intégrées de SVG n'ont jamais été obsolètes comme prévu. Bien sûr, CSS et JavaScript sont plus que capables de porter la charge, mais il est bon de savoir que Smil n'est pas mort dans l'eau comme précédemment

'Pretty' est dans l'œil du spectateur'Pretty' est dans l'œil du spectateurApr 23, 2025 am 09:40 AM

Yay, laissez-le saut pour le wat-wrap: joli atterrissage dans la technologie safari aperçu! Mais méfiez-vous qu'il est différent de la façon dont il fonctionne dans les navigateurs de chrome.

CSS-Tricks raconte xliiiCSS-Tricks raconte xliiiApr 23, 2025 am 09:35 AM

Cette mise à jour de CSS-Tricks met en évidence des progrès significatifs dans l'Almanac, des apparitions de podcast récentes, un nouveau guide CSS Counter et l'ajout de plusieurs nouveaux auteurs contribuant un contenu précieux.

La fonctionnalité @Apply de Tailwind est meilleure qu'il n'y paraîtLa fonctionnalité @Apply de Tailwind est meilleure qu'il n'y paraîtApr 23, 2025 am 09:23 AM

La plupart du temps, les gens présentent la fonctionnalité de Tailwind avec l'un des utilitaires à propriété unique de Tailwind (qui modifie une seule déclaration CSS). Lorsqu'il est présenté de cette façon, @Apply ne semble pas du tout prometteur. So évidence

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Adaptateur de serveur SAP NetWeaver pour Eclipse

Adaptateur de serveur SAP NetWeaver pour Eclipse

Intégrez Eclipse au serveur d'applications SAP NetWeaver.

DVWA

DVWA

Damn Vulnerable Web App (DVWA) est une application Web PHP/MySQL très vulnérable. Ses principaux objectifs sont d'aider les professionnels de la sécurité à tester leurs compétences et leurs outils dans un environnement juridique, d'aider les développeurs Web à mieux comprendre le processus de sécurisation des applications Web et d'aider les enseignants/étudiants à enseigner/apprendre dans un environnement de classe. Application Web sécurité. L'objectif de DVWA est de mettre en pratique certaines des vulnérabilités Web les plus courantes via une interface simple et directe, avec différents degrés de difficulté. Veuillez noter que ce logiciel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

VSCode Windows 64 bits Télécharger

VSCode Windows 64 bits Télécharger

Un éditeur IDE gratuit et puissant lancé par Microsoft