Comment optimiser l'écriture CSS

Optimisation de l'écriture CSS : 1. Le niveau d'imbrication ne doit pas être trop profond, généralement pas plus de 4 niveaux ; 2. Évitez d'utiliser des sélecteurs d'éléments, ce qui n'est pas propice aux modifications ultérieures ; classe publique et définition Le même style est plus pratique; 4. Réduisez le nombre de fichiers introduits et l'affichage du contenu doit être priorisé.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Lors de l'écriture de CSS, vous devez prendre en compte le nom de l'identifiant, de la classe, etc., la structure des fichiers, l'extraction des modules communs, la réutilisabilité du code, la lisibilité, l'évolutivité et la maintenabilité. Sinon, vous devrez peut-être consacrer beaucoup d'efforts au processus. étape ultérieure. Lorsque vous envisagez d'écrire du CSS suffisamment scientifique, vous devez prendre en compte les aspects suivants.

Analysez d'abord les besoins et séparez l'en-tête, la navigation, la barre latérale, la zone de bannière, la zone de contenu principale, le bas, etc. Étant donné que la réutilisabilité des éléments requis est très élevée et ne peut être attribuée à aucun module fixe, tel que la pagination, les fenêtres contextuelles, etc., ils doivent séparer une section distincte de CSS et JS exclusifs, c'est-à-dire la composantisation. Avec une structure claire, l’entretien est facile.

Ensuite, affinez-le et trouvez quelques petites parties hautement réutilisables, telles que les bordures, les arrière-plans, les icônes, les polices, les marges, les méthodes de mise en page, etc. Ceux-ci sont beaucoup utilisés, entraînant une redondance du code et des difficultés de maintenance. Par conséquent, une maintenance et une modification unifiées de cette pièce sont nécessaires.

Dans le même temps, l'ordre du code est également important pour faciliter la maintenance et l'héritage ou la couverture en cascade. En plus de ces accidents, l'ajout d'un répertoire ou d'un nom devant le segment de code via des commentaires peut également faciliter la maintenance.

Ensuite, dès la conclusion, vous devez faire attention à :

1. Le niveau d'imbrication ne doit pas être trop profond, car cela augmenterait le temps de rendu. En général, il est préférable de ne pas dépasser 4 couches.

2. Évitez d'utiliser des sélecteurs d'éléments.

Raison :

• Le même élément peut être utilisé plusieurs fois. Lorsque le navigateur parcourt, il parcourra tous les éléments, ce qui n'est pas nécessaire.

• Les exigences et la structure du code peuvent changer à tout moment et peuvent être réutilisées sur d'autres pages, ou du contenu peut être ajouté à cette page, donc l'utilisation d'un sélecteur d'élément pour verrouiller quelque chose n'est pas propice à des modifications ultérieures.

3. Évitez d'utiliser des sélecteurs de groupe.

Par exemple :

.header ul li,.content ul li,.footer ul li{border-left:1px solid red};

Dans ce cas, vous devez extraire une classe publique puis définir le même style, ce qui est plus pratique.

4. Le nombre et l'ordre d'introduction des fichiers

Le nombre de demandes de fichiers doit être aussi petit que possible, le contenu doit être affiché par ordre de priorité et les fichiers doivent être chargés dans l'ordre, afin que les utilisateurs puissent en voir plus. les plus importants en premier.

Du point de vue de la contradiction, lors de la nomination d'un style, nous ne pouvons pas envisager de nommer deux modules avec des fonctions différentes qui ont des styles similaires dans le projet de conception, tels que "actualités", "à propos", etc., par leur contenu. est considéré à partir de la catégorie, de la fonction et de la page. Facilitez l’établissement de liens entre les noms et les structures. Une fois que vous êtes devenu plus compétent en écriture CSS, vous pouvez utiliser un préprocesseur CSS pour améliorer l'efficacité.

(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!