Quelles sont les règles de dénomination des sélecteurs d'identifiant en CSS

Cette fois, je vais vous donner un peu de vulgarisation scientifique sur les règles de dénomination du sélecteur d'identifiant en CSS, et quelles sont les précautions lors de la nomination du sélecteur d'identifiant en CSS. un résumé. Jetons un coup d’oeil.

Sensible à la casse

ne peut contenir que [a-zA-Z0-9], -,, qui ne peut pas commencer par, -, 0-9

en CSS Dans le convention de dénomination, le nom ne peut pas commencer par un chiffre, mais ne peut commencer que par une lettre, un trait d'union ou un trait de soulignement. Il peut être suivi d'une lettre, d'un trait d'union, d'un trait de soulignement ou d'un chiffre.
Dans le même temps, il convient de noter que même si ce n'est pas strict dans HTML4.01 et les versions précédentes, en XHTML, la dénomination en CSS est sensible à la casse.

1. Parlons d'abord de la sémantique

La soi-disant sémantique signifie que le nom doit décrire le contenu, pas la performance. Les exemples sont les suivants

♦Type de performance (non recommandé)

PurpleBold (violet gras)

BigHeading (grand titre)

top-left-box (case en haut à gauche)

souligné-et-vert (vert souligné)

boxLeft (case de gauche)

rouge (rouge)

La marque rouge implique l'expression de l'élément, qui est dans le nom Ce n'est pas autorisé car la forme de l'expression change. Lorsque des changements se produisent, non seulement les noms de classe et d'identifiant du CSS doivent être modifiés, mais également les noms de classe et d'identifiant des éléments HTML correspondants. Ceci est assez gênant. Lorsque vous modifiez un grand site Web, plusieurs modifications de ce type prennent beaucoup de temps et sont fastidieuses. Par conséquent, il convient d’adopter autant que possible une dénomination qui s’adapte aux changements, c’est-à-dire qu’elle est étroitement liée au contenu.

♦Sémantique (préconisé)

sidebar (sidebar)

avertissement (avertissement)

Bien sûr, il est parfois approprié d'utiliser des expressions pour nommer les réunions Plus souple. Par exemple, utilisez le nom d’affichage bordé pour ajouter le même style à plusieurs endroits du site Web.

N'oubliez pas que la meilleure solution n'est pas la plus propre, ni la plus belle. Au lieu de s'en tenir aux règles, il vaut mieux ouvrir ses idées.

2. Caractères acceptables

Meilleure règle : utilisez toujours des lettres, des chiffres ou des traits d'union, et commencez toujours par une lettre

N'oubliez pas, la classe et l'identifiant les noms sont sensibles à la casse.

N'utilisez pas de traits de soulignement, ne commencez pas par des chiffres ou des traits d'union et n'acceptez pas "*", "/", "". Bien que les nouveaux navigateurs prennent davantage en charge les jeux de caractères inhabituels, ce n'est pas le cas pour tous les navigateurs. Pour garantir la compatibilité, veuillez suivre les meilleures règles.

3. Conventions

L'utilisation de certains noms conventionnels peut améliorer la prévisibilité du code, le rendant plus facile à comprendre pour vous-même et les autres, et également pour aider les lecteurs d'écran et les analyseurs. travailler, améliorer le référencement (optimisation des moteurs de recherche)

Pour les conventions, reportez-vous au WebManuel de spécification du développement front-end

Capitalisation

Cas Camel (chaque lettre d'un mot abrégé est dans la même casse : pdfLink linkPDF)

Trait d'union

5. espace de noms

plus préfixe, tel que : wp-users. Les espaces de noms nécessitent le développement de conventions d’espace de noms au sein de l’équipe.

C'est l'une des techniques utilisées par le CSS défensif, qui isole le code via des espaces de noms pour éviter les conflits et l'empêcher d'affecter le code original et futur.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment choisir le format d'image dans les pages Web

Quelle est la mise en page du flux dans la mise en page mobile Quel est le principe

La méthode impopulaire de centrage des éléments horizontalement et verticalement

Conteneur de centrage vertical du html+ css

Comment utiliser scientifiquement les opérateurs de comparaison en js

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!