La méthodologie CSS telle que BEM est une spécification de dénomination et organisationnelle proposée pour résoudre les problèmes de confusion et de collaboration de style dans de grands projets. Son c?ur réside dans l'amélioration de l'efficacité de la maintenabilité et de la collaboration grace à des noms de classe structurés, notamment: 1. Les noms de classe sont auto-interprétés pour faciliter la collaboration; 2. évitez les conflits de style; 3. Il est plus facile de localiser et de modifier. BEM forme une structure claire nommée via le bloc (composant indépendant), l'élément (élément enfant) et le modificateur (état ou variant), tels que l'élément .block \ _ \ _ - modificateur. D'autres méthodologies telles que SMACSS, OOCSS et ITCSS ont leur propre objectif et conviennent à différentes tailles de projet. Dans les applications réelles, les règles de dénomination doivent être unifiées, les composants doivent être indépendants, les préprocesseurs doivent être utilisés raisonnablement et la surchamance doit être évitée. Le choix de la bonne méthodologie peut améliorer considérablement l'efficacité et la qualité du développement du CSS.

L'écriture de CSS peut sembler simple, mais à mesure que le projet devient plus grand, les feuilles de style peuvent facilement devenir désordonnées et difficiles à entretenir. Surtout lorsque plusieurs personnes collaborent, le nom d'un nom de classe affectera-t-il d'autres pages? Pourquoi les styles sont-ils inexplicablement écrasés? Ces problèmes peuvent en fait être évités grace à une organisation CSS raisonnable. L'utilisation de BEM ou d'autres méthodologies CSS est de résoudre ces problèmes pratiques.

Qu'est-ce que la méthodologie CSS? Pourquoi en avez-vous besoin?

La méthodologie CSS est essentiellement un ensemble de conventions de style de dénomination et de style organisationnel, dans le but de rendre les noms de classe significatifs, prévisibles et réduisent les conflits.

Par exemple, lorsque vous n'utilisez pas de méthodologie, vous pouvez écrire des noms de classe comme .red ou .title , mais ces noms sont trop vagues et d'autres ne peuvent pas les comprendre et sont faciles à répéter. Après avoir utilisé BEM, le nom de la classe deviendra une forme comme .product-card__title--featured , et vous pouvez voir en un coup d'?il dans quel élément il se trouve et s'il y a des changements d'état.

Les principaux avantages sont:

• Les noms de classe sont explicites pour la collaboration
• évitez les conflits de style
• Plus facile à localiser et à modifier

Comment fonctionne BEM?

Le BEM est l'abréviation du modificateur de l'élément de bloc, et sa structure centrale est:

• Bloc : une composante autonome, comme .menu ou .button
• élément : un élément enfant appartenant à un bloc, écrit comme .block__element , comme .menu__item
• Modificateur : décrit l'état ou la variante du bloc ou de l'élément, écrit comme .block--modifier .block__element--modifier ou .button--primary

Par exemple:

 <div class = "card">
  <div class = "card__header"> title </div>
  <div class = "card__body card__body - highlighted">
    Contenu ici
  </div>
</div>

Cette structure exprime clairement que la "carte" est un bloc, "en-tête" et "corps" sont ses composants, et "mis en évidence" est un état de corps.

Comparaison des autres méthodologies CSS communes

En plus de BEM, il existe plusieurs méthodologies couramment utilisées, chacune avec ses caractéristiques:

• SMACSS (architecture évolutive et modulaire pour CSS)
  Divisez CSS en cinq catégories: base, mise en page, module, état et thème, qui conviennent aux grands projets et mettent l'accent sur la structure organisationnelle plut?t que pour nommer les spécifications.

• OOCSS (CSS orienté objet)
  Soulignez le concept d'objet et de styles abstraits dans des objets réutilisables, tels que .btn et .btn--large . L'avantage est qu'il a une forte réutilisabilité, mais nécessite certaines capacités d'abstraction.

• ITCSS (triangle inversé CSS)
  Divisez les styles par calque, de commun à spécifique, aidez à contr?ler les priorités du style. Convient aux projets moyens et grands, il peut être utilisé en combinaison avec BEM.

La méthodologie à choisir dépend de la taille du projet et des habitudes d'équipe. Les petits projets ne peuvent utiliser que certaines des idées d'OOCSS, et les projets moyens et grands recommandent des combinaisons BEM ITCSS.

Quelques conseils dans des applications pratiques

• Dénomination unifiée, n'ajoutez pas de préfixe et de suffixe au hasard
  Par exemple, utilisez le double soulignement__ pour représenter les éléments __ les barres horizontales doubles -- pour représenter les modificateurs. N'inventez pas vous-même des symboles.

• Pensée composée, essayez de maintenir l'indépendance
  Chaque bloc doit exister indépendamment sans compter sur des styles externes. Cela facilite la réutilisation et le test.

• Plus efficace avec le préprocesseur
  Lorsque vous utilisez SCSS ou moins, vous pouvez utiliser la syntaxe imbriquée pour organiser des structures BEM, telles que:

   .carte {
    &__titre {
      taille de police: 1.2EM;
    }
    &--petit {
      taille de police: 0,9em;
    }
  }

  Il deviendra automatiquement le nom de classe correct après compilation, qui est plus intuitif à écrire.

• Ne surnommez pas
  Toutes les balises HTML n'ont pas besoin d'ajouter le nom de la classe. Par exemple, <button class="button"></button> est déjà très clair, il n'est pas nécessaire d' .button__button .

---

Fondamentalement, c'est tout. Utilisez bien BEM ou d'autres méthodologies, non pour poursuivre la dénomination parfaite, mais pour rendre le code plus facile à comprendre, à modifier et à étendre. Cela peut sembler un peu long au début, mais une fois que vous avez formé une habitude, vous constaterez que le maintien du CSS est beaucoup plus facile.

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!