Comment écrire des sélecteurs CSS efficaces

Nous savons tous qu'il existe de nombreux types de sélecteurs CSS. Lorsque de nombreuses personnes écrivent des pages CSS, elles peuvent penser que c'est amusant et simple, mais vous découvrirez peu à peu qu'il s'agit simplement d'écrire sans règles, même si cela peut également être réalisé. L'effet est bon, mais dans le développement réel, cela peut entraîner davantage de travail inutile ou un travail répété, et CSS n'est pas efficace. Ainsi, dans cet article, nous allons vous apprendre à écrire du CSS efficace et réutilisable, principalement dans les aspects suivants.

Regardez d'abord un court morceau de code CSS :

#menus > li { font-size: 14px; }

Peut-être que tout le monde devinera que le navigateur respectera les règles ci-dessus de gauche à droite. Nous imaginerons que le navigateur trouve d'abord. l'élément menus id unique, puis appliquez le style à son élément enfant direct li. sur les éléments. Cela semble être assez efficace.

Cependant, les sélecteurs CSS correspondent en fait de droite à gauche. Par conséquent, la règle ci-dessus n'est pas efficace. Le navigateur doit parcourir chaque élément li de la page et déterminer si l'identifiant de son élément parent est. menus.

Le système de style commence à faire correspondre les règles du sélecteur le plus à droite vers la gauche. Tant qu'il y a d'autres sélecteurs à gauche du sélecteur actuel, le système de style continuera à se déplacer vers la gauche jusqu'à ce qu'il trouve un élément qui correspond à la règle, ou qu'il se ferme en raison d'une incompatibilité.

Il existe les règles communes suivantes pour écrire des sélecteurs CSS efficaces :

1. Évitez d'utiliser des règles génériques

En plus des sélecteurs génériques au sens traditionnel, nous avons des sélecteurs frères et sœurs adjacents. , les sous-sélecteurs et les sélecteurs d'attributs de sélection descendants sont tous classés selon des règles génériques. Il est recommandé d'utiliser uniquement des sélecteurs d'ID, de classe et d'étiquette.

2. Ne limitez pas le sélecteur d'ID

Un ID spécifié ne peut correspondre qu'à un seul élément de la page, il n'est donc pas nécessaire d'ajouter des qualificatifs supplémentaires. Par exemple, div#header n'est pas nécessaire et doit être simplifié en #header.

3. Ne limitez pas le sélecteur de classe

Ne limitez pas le sélecteur de classe avec des étiquettes spécifiques, mais développez le nom de la classe en fonction de la situation réelle. Par exemple, remplacez li.chapter par .li-chapter, ou encore mieux, .list-chapter.

4. Rendez les règles aussi précises que possible

N'essayez pas d'écrire de longs sélecteurs comme ol li a, il est préférable de créer une classe comme .list-anchor et de la mettre Ajouter à l'élément approprié.

5. Évitez d'utiliser des sélecteurs descendants

Habituellement, le traitement des sélecteurs descendants est le plus coûteux, mais l'utilisation de sous-sélecteurs peut également obtenir les résultats souhaités et est plus efficace.

6. Évitez d'utiliser des sous-sélecteurs de balises

S'il existe des sous-sélecteurs basés sur des balises comme #menus > a, alors une classe doit être utilisée pour associer chaque étiquette. éléments, tels que .menus-item.

7. Remettez en question toutes les utilisations des sous-sélecteurs

Examinez toutes les utilisations des sous-sélecteurs et remplacez-les par des classes concrètes chaque fois que possible.

8. S'appuyer sur l'héritage

Comprenez quels attributs peuvent être hérités, puis évitez de spécifier à plusieurs reprises des règles pour ces attributs. Par exemple, spécifiez list-style-image sur les éléments de la liste plutôt que sur chaque élément de la liste. Veuillez vous référer à la liste des propriétés héritées pour en savoir plus sur les propriétés héritées de chaque élément.

Le contenu ci-dessus est un tutoriel sur la façon d'écrire des sélecteurs CSS efficaces. J'espère qu'il pourra aider tout le monde.

Recommandations associées :

Résumé des définitions et de l'utilisation du sélecteur CSS

Sélecteur CSS

Tutoriel CSS Basic CSS Selector_Basic

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!