convention de dénomination des classes

Pour les novices comme html, c'est un casse-tête d'ajouter des styles et des noms aux balises html. Ils ne savent pas comment nommer les balises, ou simplement les nommer avec désinvolture. . C'est très courant dans la vie quotidienne. C'est très gênant lors du développement. Aujourd'hui, je vais résumer la convention de dénomination des classes en html !

Mots-clés de classe courants :

Classe de mise en page : en-tête, pied de page, conteneur, principal, contenu, côté, page, section
classe wrap : wrap, inner
classe de bloc : région, bloc, boîte
Structure classe : hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
Classe de liste : liste, élément, champ
Catégories primaires et mineures : primaire, secondaire, sub, mineur
Catégorie de taille : s, m, l, xl, grand, petit
Catégorie de statut ：actif, actuel, vérifié, survol, échec, succès, avertissement, erreur, activé, désactivé
Classe de navigation：nav, précédent, suivant, fil d'Ariane, avant, arrière, indicateur, pagination, premier, dernier
Classe d'interaction : astuces, alerte, modal, pop, panneau, onglets, accordéon, slide, scroll, superposition,
Classe d'étoiles : note, étoile
Classe de séparation : groupe, séparé, diviseur
etc. Classification : complet, demi, tiers, quart
Classe de table : table, tr , td, cell, row
Catégorie d'image : img, miniature, original, album, galerie
Catégorie de langue : cn, en
Classe du forum : forum, bbs, topic, post
Classe de direction : haut, bas, gauche, droite
Autres classes sémantiques : btn, fermer, ok, annuler , switch ; lien, titre, info, intro, plus, icône ; formulaire, étiquette, recherche, contact, téléphone, date, email, utilisateur, chargement...
Après avoir les mots-clés, commençons par Établissez quelques règles simples.
Établissez des règles simples :
sont reliés par des tirets, tels que .item-img
Utilisez deux tirets pour indiquer une spécialisation, tels que .item-img.item-img- -small signifie spécialiser la classe de statut
basée sur .item-img et utiliser directement des mots-clés. Reportez-vous aux mots-clés ci-dessus, tels que .active, .checked. L'icône
est préfixée par icon- (l'icône de police utilise .icon). - méthode font.i-name).
Les modules sont nommés avec des mots-clés, tels que .slide, .modal, .tips, .tabs. La spécialisation est représentée par les deux tirets ci-dessus, tels que .imgslide--full, .modal--pay, .tips--. up, .tabs--simple
Les classes d'opérations JS doivent être unifiées avec le préfixe js-
N'utilisez pas plus de quatre classes en combinaison, telles que .a.b.c.d
mots-clés modifiés : .
En prenant header comme exemple, nous pouvons ajouter des préfixes pour représenter différents en-têtes, tels que block header.block-hd (hd est l'abréviation de header), modal header.modal-hd et article header.article-hd.
Le même titre peut également être divisé en titre de page.page-tt (abréviation de titre), titre de bloc.block-tt, etc.
De même, cela nous amène à la deuxième question, que devons-nous faire si nous voulons spécialiser une classe ?
Classe spécialisée :
En prenant le tt ci-dessus comme exemple, il existe probablement trois méthodes :
Le premier crime : modifier directement la classe, changer .page-tt en .page- user-tt (vous pouvez utiliser le % de scss pour définir d'abord le code partagé).
Deuxième méthode : ajoutez une spécialisation de classe. Selon les règles que nous avons définies ci-dessus, ajoutez une classe à .page-tt pour devenir .page-tt.page-tt--user. Faites attention à .page-tt--user. . Ce n'est pas une classe indépendante, elle est basée sur .page-tt.
La troisième méthode : utilisez la classe parent et donnez-lui une plage, formant ainsi .page-user .page-tt.
Généralement, nous utilisons les deuxième et troisième méthodes, car les deux ont le même .page-tt, ce qui facilite le contrôle de certains styles communs de base.
À partir de la troisième méthode de contrôle via les classes parents, nous entrons dans la troisième question à discuter, la structure hiérarchique

Niveau
L'exemple de hiérarchie le plus approprié Là n'est rien de mieux que la structure ul>li, comme la structure suivante :

<ul>
    <li>
        <a href="#"><img src="" alt=""></a>
        <h3><a href="#"></a></h3>
        <p></p>
    </li>
</ul>

De manière générale, nous avons également deux façons de définir les niveaux, la première est l'héritage et la seconde est les mots-clés.

// 继承式
ul.card-list
    li.list-item
        a.item-img-link>img.item-img
        h3.item-tt>a.item-tt-link
        p.item-text

// 关键词式
ul.card-list
    li.item
        a.field-img-link>img.field-img
        h3.field-tt>a.field-tt-link
        p.field-text

On peut voir de ce qui précède que la formule d'héritage suit généralement le dernier mot de l'élément enfant de l'élément parent, comme li suivi de la liste de ul, et les éléments enfants de li suivez l'élément de li ; quant à la formule du mot-clé, elle est entièrement composée de mots-clés utilisés pour représenter les niveaux, et la liste>item>filed constitue exactement trois niveaux.
Enfin, nous abordons notre dernière question de notre hiérarchie, comment contrôler la portée du style.

Recommandations associées :

Quelle est la différence entre la classe et l'identifiant

La classe d'attribut qui spécifie le nom de classe d'un élément en HTML

Exemple d'analyse de la façon dont CSS utilise l'identifiant et la classe pour contrôler le style de l'élément

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!