Inna est un écrivain technique depuis 2008. Pour les dernières années, elle travaille dans Yandex dans l'équipe BEM. En savoir plus sur Inna …
L'isolation des styles CSS est le point de départ le plus fréquent de l'utilisation de BEM. Mais c'est le moins que BEM puisse vous donner. BEM apporte une approche système dans votre projet et le garde du bordel.
BEM rend votre code évolutif et réutilisable, augmentant ainsi la productivité et facilitant le travail d'équipe. Même si vous êtes le seul membre de l'équipe, BEM peut vous être utile. Néanmoins, de nombreux développeurs pensent qu'une telle approche système comme BEM met des limites supplémentaires sur leur projet et rend votre projet surchargé, lourd et lent.
Nous allons rassembler tous les aspects principaux de BEM sous une forme condensée. Cet article vous aide à comprendre les idées de base de BEM en seulement 20 minutes, et à rejeter les préjugés selon lesquels l'approche système est préjudiciable à votre projet
The Big BEM se compose de Methodology Technologies Bibliothèques et Outils . Dans cet article, nous parlerons plus de la méthodologie elle-même car c'est l'expérience concentrée d'un grand nombre de développeurs et elle apporte une approche systématique à tout projet.
Afin de vous montrer quelques cas pratiques de BEM, nous Je vais toucher aux technologies BEM et sauter complètement les bibliothèques et les outils
De la théorie à la pratique:
BEM est donc un héros ou un méchant? C'est à vous! Mais d'abord, lisez l'article
BEMBatman
Les principales raisons pour lesquelles nous n'utilisons aucun sélecteur sauf les classes
Une des règles de base du BEM la méthodologie consiste à utiliser uniquement des sélecteurs de classe. Dans cette section, nous allons expliquer pourquoi.
Pourquoi n'utilisons-nous pas d'identifiants?
Pourquoi n'utilisons-nous pas de sélecteurs de balises?
Pourquoi n'utilisons-nous pas un sélecteur universel?
Pourquoi? n'utilisons-nous pas la réinitialisation CSS?
Pourquoi n'utilisons-nous pas de sélecteurs imbriqués?
Pourquoi ne pas combiner une étiquette et une classe dans un sélecteur?
Pourquoi n'utilisons-nous pas les sélecteurs combinés?
Pourquoi n'utilisons-nous pas les sélecteurs d'attributs?
Nous n'utilisons pas d'identifiants (sélecteurs d'ID)
L'ID fournit un nom unique pour un élément HTML. Si le nom est unique, vous ne pouvez pas le réutiliser dans l'interface. Cela vous empêche de réutiliser le code
Common Misconceptions
Les identifiants sont requis pour utiliser JavaScript Les navigateurs modernes peuvent fonctionner avec des ID ou des classes. Tout type de sélecteur est traité au même rythme dans le navigateur.
Les ID sont utilisés avec la balise Si vous placez dans un contrôle, il n'a pas besoin d'ID . Au lieu de il suffit d'utiliser .
Nous n'utilisons pas de sélecteurs de balises
Le balisage HTML est instable: un nouveau design peut modifier l'imbrication des sections, niveaux de cap (par exemple, de
à ) ou transformer le paragraphe en le
. L'un de ces changements casse les styles qui sont écrits pour les balises. Même si la conception ne change pas, l'ensemble des étiquettes est limité. Pour utiliser une mise en page existante dans un autre projet, vous devez résoudre les conflits entre les styles écrits pour les mêmes balises.
Un ensemble étendu de balises sémantiques ne peut pas non plus répondre à tous les besoins de mise en page.
L'en-tête contient un logo. Un clic sur le logo ouvre la page principale du site ( index ). Vous pouvez le marquer avec des balises en utilisant la balise pour l'image et la balise pour le lien
Pour faire la distinction entre le lien du logo et un lien ordinaire dans le texte, vous devez styles supplémentaires. Maintenant, supprimez le soulignement et la couleur bleue du lien du logo:
header a {
...
}
Le lien du logo n'a pas besoin d'être affiché sur la page principale, donc changez le balisage de la page d'index:
Vous n'avez pas besoin de supprimer le soulignement et la couleur bleue de l'étiquette . Alors faisons des règles générales pour le lien du logo de différentes pages:
header a,
span span
{
...
}
À première vue, ce code semble bien, mais imaginez si le concepteur supprime le logo de la mise en page. Les noms des sélecteurs ne vous aident pas à comprendre quels styles doivent être supprimés du projet avec le logo. Le sélecteur "header a" ne montre pas la connexion entre le lien et le logo. Ce sélecteur peut appartenir au lien dans le menu d'en-tête ou, par exemple, au lien vers le profil de l'auteur. Le sélecteur "header span" pourrait appartenir à n'importe quelle partie de l'en-tête.
Pour éviter toute confusion, utilisez simplement le sélecteur de classes logo pour écrire les styles de logo:
.logo {
...
}
Nous n'utilisons pas la réinitialisation CSS
La réinitialisation CSS est un ensemble de règles CSS globales créées pour l'ensemble de la page. Ces styles affectent tous les nœuds de mise en page, violent l'indépendance des composants et compliquent leur réutilisation.
Dans BEM, "reset" et "normalize" ne sont même pas utilisés pour un seul bloc. La réinitialisation et la normalisation annulent les styles existants et les remplacent par d'autres styles, que vous devrez modifier et mettre à jour ultérieurement dans tous les cas. Par conséquent, le développeur doit écrire des styles qui remplacent ceux qui viennent d'être réinitialisés.
Nous n'utilisons pas le sélecteur universel ( * )
Le sélecteur universel indique que les caractéristiques du projet un style qui affecte tous les nœuds de la mise en page. Cela limite la réutilisation de la mise en page dans d'autres projets:
Vous devez en outre transférer les styles avec un astérisque au projet. Mais dans ce cas, le sélecteur universel peut affecter les styles du nouveau projet.
Les styles avec un astérisque doivent être ajoutés à la mise en page que vous transférez.
En outre, un sélecteur universel peut rendre le code du projet imprévisible . Par exemple, il peut affecter les styles des composants de la bibliothèque universelle.
Les styles courants ne vous font pas gagner du temps. Les développeurs commencent souvent par réinitialiser toutes les marges pour les composants ( * {margin: 0; padding: 0;} ), mais ils les définissent tout de même comme dans la mise en page (par exemple, margin: 12px; padding: 30px; )
Nous n'utilisons pas de sélecteurs imbriqués
Les sélecteurs imbriqués augmentent le couplage de code et rendent difficile la réutilisation du code.
La méthodologie BEM n'interdit pas les sélecteurs imbriqués , mais il recommande de ne pas trop les utiliser. Par exemple, l'imbrication est appropriée si vous devez modifier les styles des éléments en fonction de l'état du bloc ou du thème qui lui a été assigné.
Les sélecteurs combinés sont plus spécifiques que les sélecteurs simples, ce qui rend plus difficile la redéfinition des blocs
Considérons le code suivant:
Imaginons que vous définissiez des règles CSS dans le sélecteur .button.button_theme_islands pour faire moins d'écriture. Ensuite, vous ajoutez le modificateur "actif" au bloc:
Le sélecteur .button_active ne redéfinit pas les propriétés du bloc écrites comme .button.button_theme_islands car .button.button_theme_islands est plus spécifique que .button_active . Pour le redéfinir, combinez le sélecteur de modificateur de bloc avec le sélecteur .button et déclarez-le sous le .button.button_theme_islands car les deux sélecteurs sont également spécifiques:
Nous ne combinons pas une balise et une classe dans un sélecteur
Combiner une balise et une classe dans le même sélecteur (par exemple, button.button ) rend les règles CSS plus spécifiques, donc il est plus difficile de les redéfinir.
Considérons le code suivant:
Supposons que vous définissiez des règles CSS dans le bouton button.button . Ensuite, vous ajoutez le modificateur actif au bloc:
Le sélecteur .button_active ne redéfinit pas les propriétés du bloc écrites comme button.button car button.button est plus spécifique que .button_active . Pour le rendre plus spécifique, vous devez combiner le sélecteur de modificateur de bloc avec le bouton button.active_active .
Au fur et à mesure que le projet se développe, vous pourriez vous retrouver avec des blocs avec input.button , span.button ou a.button sélecteurs. Dans ce cas, tous les modificateurs du bloc et tous ses éléments imbriqués nécessiteront quatre déclarations différentes pour chaque instance
Exceptions possibles
Dans de rares cas, la méthodologie permet de combiner des sélecteurs de tags et de classes . Par exemple, cela peut être utilisé pour définir le style de commentaires dans les systèmes CMS qui ne peuvent pas générer la mise en page correcte.
Vous pouvez utiliser le commentaire pour écrire un texte, insérer des images ou ajouter un balisage. Pour les faire correspondre à la conception du site, le développeur peut prédéfinir des styles pour toutes les balises disponibles pour l'utilisateur et les cascader vers les blocs imbriqués:
...
Règles CSS:
.content a {
...
}
.content p {
famille de polices: Arial, sans-serif;
text-align: centre;
}
Nous n'utilisons pas de sélecteurs d'attribut
Les sélecteurs d'attribut sont moins informatifs que les sélecteurs de classe. Pour preuve, considérons un exemple avec un formulaire de recherche dans l'en-tête:
Essayez d'utiliser les attributs de sélecteur pour écrire les styles de formulaire:
Dans cet exemple, vous ne pouvez pas dire avec certitude du nom du sélecteur que les styles appartiennent au formulaire de recherche. L'utilisation de classes le rend plus clair. Les classes n'ont pas de restrictions qui vous empêchent d'écrire clairement. Par exemple, vous pouvez l'écrire comme ceci:
.form .search {
...
}
Maintenant, le code est moins ambigu, et il est clair que les styles appartiennent au formulaire de recherche.
Mais les sélecteurs imbriqués rendent les règles CSS plus spécifiques et vous empêchent de transférer la mise en page entre les projets. Pour se débarrasser de l'imbrication, utilisez les principes BEM
Résumé : class est le seul sélecteur qui vous permet d'isoler les styles de chaque composant dans le projet; augmenter la lisibilité du code et ne pas limiter la réutilisation de la mise en page.
L'isolation des styles CSS est le point de départ le plus fréquent du voyage BEM. Mais c'est le moins que BEM puisse vous donner. Pour comprendre comment les composants indépendants sont organisés dans BEM, vous devez apprendre les concepts de base, à savoir Bloc, Elément, Modificateur et Mix. Faisons cela dans la section suivante
Les bases de BEM
Block and Elements
La méthodologie BEM est un ensemble de règles universelles qui peuvent être appliquées indépendamment des technologies utilisées, telles que CSS, Sass, HTML , JavaScript ou React.
BEM aide à résoudre les tâches suivantes:
Réutiliser la mise en page;
Déplacer des fragments de mise en page dans un projet en toute sécurité;
Déplacer la mise en page finie entre projets;
Réduire le temps de débogage du projet
Dans un projet BEM, l'interface est constituée de blocs pouvant inclure éléments . Les blocs sont des composants indépendants de la page. Un élément ne peut pas exister en dehors du bloc, alors gardez à l'esprit que chaque élément peut appartenir à un seul bloc
Les deux premières lettres de BEM représentent B verrous et E ] lements. Le nom du bloc est toujours unique. Il définit l'espace de nom pour les éléments et fournit une connexion visible entre les parties du bloc. Les noms de bloc sont longs mais clairs pour montrer la connexion entre les composants et pour éviter de perdre des parties de ces composants lors du transfert de la mise en page.
Pour voir toute la puissance du nommage BEM, considérons cet exemple avec un formulaire. Selon la méthodologie BEM, le formulaire est implémenté à l'aide du bloc . En HTML, le nom du bloc est inclus dans l'attribut de classe :
Toutes les parties de la forme (le bloc ) qui n'ont pas de sens par elles-mêmes sont considérées comme ses éléments. Ainsi, le champ de recherche ( search ) et le bouton [ submit ) sont des éléments du bloc . Les classes indiquent également qu'un élément appartient au bloc:
Notez que le nom du bloc est séparé du nom de l'élément par un séparateur spécial. Dans le schéma de dénomination classique BEM deux traits de soulignement sont utilisés comme séparateur. Tout peut fonctionner comme un séparateur. Il existe des conventions de nommage alternatives et chaque développeur choisit celui qui lui convient. L'important est que les séparateurs vous permettent de distinguer les blocs des éléments et des modificateurs par programme.
Les noms des sélecteurs indiquent clairement que pour déplacer le formulaire vers un autre projet, vous devez copier tous ses composants:
.form__search {}
.form__submit {}
L'utilisation de blocs et d'éléments pour les noms de classes résout un problème important: il nous aide à nous débarrasser des sélecteurs imbriqués. Tous les sélecteurs d'un projet BEM ont le même poids. Cela signifie qu'il est beaucoup plus facile de redéfinir les styles écrits selon BEM. Maintenant, pour utiliser le même formulaire dans un autre projet, vous pouvez juste copier sa mise en page et ses styles.
L'idée du nommage des composants BEM est que vous pouvez définir explicitement la connexion entre le bloc et son
Modificateurs et mélanges
Officiellement, "M" signifie M odifier, mais cela implique aussi une notion plus importante dans BEM: "mix". Les modificateurs et les mixages modifient un bloc et ses éléments. Examinons-le de plus près.
Modificateurs
Un modificateur définit l'apparence, l'état et le comportement d'un bloc ou d'un élément. L'ajout de modificateurs est facultatif. Les modificateurs vous permettent de combiner différentes fonctions de bloc, car vous pouvez utiliser n'importe quel nombre de modificateurs. Mais un bloc ou un élément ne peuvent pas recevoir différentes valeurs du même modificateur.
Voyons comment fonctionnent les modificateurs
Imaginez que le projet nécessite le même formulaire de recherche que dans l'exemple ci-dessus. Il devrait avoir les mêmes fonctions mais avoir une apparence différente (par exemple, les formulaires de recherche dans l'en-tête et dans le pied de page devraient différer). La première chose que vous pouvez faire pour changer l'apparence du formulaire est d'écrire des styles supplémentaires:
header .form {}
footer .form {}
Le sélecteur d'en-tête .form a plus de poids que le sélecteur ce qui signifie qu'une règle remplacera l'autre. Mais comme nous l'avons vu, les sélecteurs imbriqués augmentent le couplage de code et rendent la réutilisation difficile, donc cette approche ne fonctionne pas pour nous.
Dans BEM, vous pouvez utiliser un modificateur pour ajouter de nouveaux styles au bloc:
La ligne
indique que le bloc a été affecté d'un modificateur de type avec la valeur originale . Dans un schéma classique, le nom du modificateur est séparé du nom du bloc ou de l'élément par un trait de soulignement.
Le formulaire peut avoir une couleur, une taille, un type ou un thème de conception unique. Tous ces paramètres peuvent être définis avec un modificateur:
Le même formulaire peut avoir l'air différent mais reste de la même taille:
Mais les sélecteurs pour chaque modificateur auront toujours le même poids:
Important : Un modificateur contient uniquement des styles supplémentaires qui modifient l'implémentation du bloc d'origine d'une manière ou d'une autre. Cela vous permet de définir une seule fois l'apparence d'un bloc universel et d'ajouter uniquement les fonctions qui diffèrent du code de bloc d'origine dans les styles de modificateur.
C'est pourquoi un modificateur doit toujours être sur le même noeud DOM avec le bloc et l'élément auquel il est associé.
Vous pouvez utiliser des modificateurs pour appliquer des composants universels dans des cas très spécifiques. Le code de bloc et d'élément ne change pas. La combinaison nécessaire de modificateurs est créée sur le noeud DOM
Mixes
Un mixage permet d'appliquer la même mise en forme à différents éléments HTML et de combiner le comportement et les styles de plusieurs entités tout en évitant le code reproduction. Ils peuvent remplacer les blocs wrapper abstraits.
Un mix signifie que vous hébergez plusieurs entités BEM (blocs, éléments, modificateurs) sur un seul noeud DOM. Similaire aux modificateurs, les mélanges sont utilisés pour changer les blocs. Regardons quelques exemples de quand vous devriez utiliser un mélange.
Les blocs peuvent différer non seulement visuellement mais aussi sémantiquement. Par exemple, un formulaire de recherche, un formulaire d'inscription et un formulaire de commande de gâteaux sont tous des formulaires. Dans le layout, ils sont implémentés avec le bloc "form" mais ils n'ont aucun style en commun. Il est impossible de gérer ces différences avec un modificateur. Vous pouvez définir des styles communs pour ces blocs, mais vous ne pourrez pas réutiliser le code.
.form,
.chercher,
.registre {
...
}
Vous pouvez utiliser un mélange pour créer des blocs sémantiquement différents pour la même forme:
Le sélecteur de classe .form décrit tous les styles qui peuvent être appliqués à n'importe quelle forme (ordre, recherche ou enregistrement):
.form {}
Vous pouvez maintenant faire un formulaire de recherche à partir de la forme universelle. Pour ce faire, créez une classe de recherche supplémentaire dans le projet. Cette classe sera responsable uniquement de la recherche. Pour combiner les styles et le comportement des classes .form et .search placez ces classes sur un seul noeud DOM:
Dans ce cas, la classe .search est un bloc distinct qui définit le comportement. Ce bloc ne peut pas avoir de modificateurs responsables du formulaire, des thèmes et des tailles. Ces modificateurs appartiennent déjà à la forme universelle. Un mélange aide à combiner les styles et le comportement de ces blocs.
Prenons un autre exemple où la sémantique du composant est modifiée. Voici un menu de navigation dans l'en-tête de la page dans lequel toutes les entrées sont des liens:
La fonctionnalité de lien est déjà implémentée dans le bloc link mais les liens de menu doivent différer visuellement des liens dans le texte. Il existe plusieurs façons de modifier les liens de menu:
Créez un modificateur d'entrée de menu qui transforme l'entrée en lien:
Dans ce cas, pour implémenter le modificateur, copiez le comportement et les styles du bloc `link`. Cela conduira à la duplication de code.
Utilisez un mélange du bloc universel `link` et de l'élément` item` du bloc `menu`:
Avec le mélange des deux entités BEM, vous pouvez maintenant implémenter le fonctionnalité de liaison de base du bloc `link` et des règles CSS supplémentaires du bloc` menu`, et éviter la duplication de code.
Géométrie externe et positionnement: abandon des enveloppes HTML abstraites
Les mélanges sont utilisés pour positionner un bloc par rapport à d'autres blocs ou pour positionner des éléments à l'intérieur d'un bloc. Dans BEM, les styles responsables de la géométrie et du positionnement sont définis dans le bloc parent. Prenons un bloc de menu universel qui doit être placé dans l'en-tête. Dans la mise en page, le bloc doit avoir un retrait de 20 px du bloc parent
Cette tâche a plusieurs solutions:
Écrire des styles avec des indentations pour le bloc de menu:
.menu {
marge gauche: 20px;
}
Dans ce cas, le bloc "menu" n'est plus universel. Si vous devez placer le menu dans le pied de page, vous devrez modifier les styles car les retraits seront probablement différents.
Dans ce cas, le projet inclura deux types de menus, bien que ce ne soit pas le cas. Le menu reste le même
Définir le positionnement externe du bloc: imbriquez le bloc `menu` dans l'enveloppe abstraite (par exemple, le bloc` wrap`) en mettant tous les retraits:
Pour éviter la tentation de créer des modificateurs et de modifier les styles de bloc pour positionner le bloc sur la page, vous devez comprendre une chose:
Le retrait d'un bloc parent n'est pas une caractéristique du bloc imbriqué. C'est une caractéristique du bloc parent. Il doit savoir que le bloc imbriqué doit être indenté de la bordure par un certain nombre de pixels.
Utilisez un mélange. Les informations sur le positionnement de bloc imbriqué sont incluses dans les éléments de bloc parent. Ensuite, l'élément de bloc parent est mélangé dans le bloc imbriqué. Dans ce cas, le bloc imbriqué ne spécifie aucun retrait et peut facilement être réutilisé n'importe où.
Continuons avec notre exemple:
Dans ce cas, la géométrie externe et le positionnement du bloc du menu sont définis via l'élément header__menu . Le bloc du menu ne spécifie aucune indentation et peut être facilement réutilisé.
L'élément de bloc parent (dans notre cas header__menu ) exécute la tâche des blocs d'encapsulation responsables pour le positionnement externe du bloc.
Blocs dans la structure de fichier
Tous les projets BEM ont une structure de fichier similaire . La structure de fichiers familière permet aux développeurs de naviguer plus facilement dans le projet, de basculer entre les projets et de déplacer des blocs d'un projet à un autre.
L'implémentation de chaque bloc est stockée dans un dossier de projet distinct. Chaque technologie (CSS, JavaScript, tests, modèles, documentation, images) est dans un fichier séparé.
Par exemple, si l'apparence du bloc input est définie avec CSS, le code est sauvegardé dans fichier input.css .
projet
common.blocks /
contribution/
input.css # L'implémentation du bloc "input" avec CSS
input.js # L'implémentation du bloc "input" avec JavaScript
Le code des modificateurs et des éléments est également stocké dans des fichiers distincts du bloc. Cette approche vous permet d'inclure dans la construction uniquement les modificateurs et les éléments nécessaires à l'implémentation du bloc.
projet
common.blocks /
contribution/
input.css # L'implémentation du bloc "input" avec CSS
input.js # L'implémentation du bloc "input" avec JavaScript
input_theme_sun.css # L'implémentation du modificateur "input_theme_sun"
input__clear.css # L'implémentation de l'élément "input__clear" avec CSS
input__clear.js # L'implémentation de l'élément "input__clear" avec JavaScript
Pour améliorer la navigation du projet, combinez les modificateurs de bloc avec plusieurs valeurs dans les répertoires
La structure de fichier de tout projet BEM consiste en niveaux de redéfinition (vous pouvez en apprendre plus ici ici ). Les niveaux de redéfinition vous permettent de:
Diviser le projet en plates-formes
Mettre à jour facilement les bibliothèques de blocs incluses dans le projet
Utiliser des blocs communs pour développer plusieurs projets
Changer les thèmes de conception sans affecter le projet
Réalisation d'expériences dans un projet en direct
L'utilisation de blocs et le stockage de toutes les technologies de blocs dans le même dossier facilitent le déplacement des blocs entre les projets. Pour déplacer tous les styles et le comportement du bloc avec la disposition, copiez simplement le dossier de bloc dans le nouveau projet.
Avantages non évidents de la méthodologie
La commodité du développement parallèle
Dans BEM, toute disposition est divisé en blocs. Comme les blocs sont indépendants, ils peuvent être développés en parallèle par plusieurs développeurs
Un développeur crée un bloc en tant que composant universel qui peut être réutilisé dans n'importe quel autre projet.
Un exemple est le bem-components bibliothèque de blocs, qui contient des blocs universels, tels qu'un lien bouton et champ de saisie . Il est plus facile de créer des blocs plus complexes à partir de composants universels. Par exemple, un sélecteur ou case à cocher .
L'utilisation de blocs dans la mise en page vous permet de gagner du temps sur l'intégration de code écrit par plusieurs développeurs, garantit l'unicité des noms de composants.
Test de la mise en page
Il est problématique de tester la fonctionnalité de la page entière, en particulier dans un projet dynamique connecté à une base de données.
Dans BEM, chaque bloc est couvert par tests. Les tests sont une technologie d'implémentation de bloc, comme Javascript ou CSS. Les blocs sont testés au stade de développement. Il est plus facile de vérifier l'exactitude d'un bloc, puis d'assembler le projet à partir des blocs testés. Après cela, tout ce que vous avez à faire est de vous assurer que l'encapsuleur fonctionne correctement.
Construction personnalisable d'un projet
Pour un développement pratique, tous les blocs et technologies d'un projet BEM sont placés dans des dossiers et fichiers séparés . Pour combiner les fichiers source en un seul fichier (par exemple, pour mettre tous les fichiers CSS dans project.css tous les fichiers JS dans project.js etc.), nous utilisons Le processus de construction.
La construction effectue les tâches suivantes:
Combine les fichiers source répartis sur le système de fichiers du projet
Inclut uniquement les blocs, éléments et modificateurs (entités BEM) nécessaires dans le projet;
Suit l'ordre d'inclusion des entités
Traite le code du fichier source pendant la construction (par exemple compile le code LESS en code CSS).
Pour inclure uniquement les entités BEM nécessaires dans la construction, vous devez créer un liste des blocs, éléments et modificateurs utilisés sur les pages. Cette liste est appelée une déclaration
Puisque les blocs BEM sont développés indépendamment et placés dans des fichiers séparés dans le système de fichiers, ils ne "savent" rien l'un de l'autre. Pour créer des blocs basés sur d'autres blocs, spécifiez des dépendances. Il existe une technologie BEM responsable de cela: les fichiers deps.js . Les fichiers de dépendance permettent au moteur de construction de savoir quels blocs supplémentaires doivent être inclus dans le projet
Cas pratique: BEM n'est pas seulement pour CSS
Dans les sections précédentes, tous les exemples de code sont pour CSS. Mais BEM vous permet de modifier le comportement du bloc et sa représentation en HTML de la même manière déclarative que dans CSS
Comment utiliser le template dans BEM
En HTML, le bloc de balisage est répété chaque fois que le bloc apparaît sur la page. Si vous créez le balisage HTML manuellement, puis que vous devez corriger une erreur ou apporter des modifications, vous devez modifier le balisage pour chaque occurrence du bloc. Pour générer du code HTML et appliquer des correctifs automatiquement, BEM utilise des modèles; les blocs sont responsables de la façon dont ils sont présentés en HTML.
Les modèles vous permettent de:
Réduire le temps utilisé pour le débogage du projet, car les changements de modèle sont automatiquement appliqués à tous les blocs de projet;
Déplacer des blocs avec la disposition actuelle vers un autre projet
BEM utilise le moteur de template bem-xjst qui comprend deux moteurs:
BEMHTML Transforme le ] BEMJSON description de la page au format HTML. Les modèles sont décrits dans des fichiers .bemhtml.js.
BEMTREE Transforme des données en BEMJSON. Les gabarits sont décrits au format BEMJSON dans les fichiers .bemtree.js
Si les gabarits ne sont pas écrits pour les blocs, le moteur de gabarit définit la balise
pour les blocs par défaut. [19659005] Comparer la déclaration des blocs et la sortie HTML:
Déclaration:
{
block: 'menu',
contenu: [
{
elem: 'item',
content: {
block: 'link'}
},
{
elem: 'item',
elemMods: { current: true }, // Set the modifier for the menu item
content: {
block: 'link'
}
}
]
}
HTML:
Pour modifier la disposition du bloc vous devez écrire des modèles pour le bloc:
Changeons le tag du menu :
block ('menu') (
tag () ('menu') // Définit la balise "menu" pour le bloc de menu
)
HTML modifié:
Similaire à CSS, le modèle est appliqué à tous les blocs "menu" sur la page
Ajouter un élément supplémentaire ( menu__inner ) qui fonctionne comme un wrapper interne et est responsable de la mise en page de the elements in the menu block. Originally the menu__inner element wasn’t included in the declaration, so we have to add it when the templates are built.
BEM templates are written in JavaScript, so you can also use JavaScript to add a new element to the template:
Modify the existing template. Rules in templates are applied in the same way as in CSS: a lower rule overrides a higher rule. Add new rules to the template, and change the link tag from to :
BEM methodology provides you strict rules to create a system in your project. But at the same time, a lot of BEM rules can be customized. BEM methodology allows you to change the naming convention, choose the most convenient file structure or add any technologies you want to the block.
Now you can tune in the system and make your own superhero of BEM!
BEM Captain America
How To Get More Out Of BEM
To start learning BEM principles, visit our website. If you have any questions you’d like to ask the team, join our Telegram channel or open up a discussion in our BEM Forum.
(rb, ra, il) 