Share
Dans ce tutoriel, nous allons apprendre à utiliser PostCSS pour rendre le développement de CSS de style BEM / SUIT plus simple et plus efficace..
Ces deux méthodologies établissent une convention de dénomination pour les classes qui facilite la gestion de vos styles, et aide les autres développeurs à reconnaître le rôle de différentes classes uniquement par la façon dont elles sont nommées..
BEM était le précurseur de ce type de méthodologie de nommage de classe, créée par Yandex. La méthodologie SUIT est une approche basée sur BEM, mais avec quelques ajustements et ajouts faits par Nicholas Gallagher. SUIT fait tout ce que BEM fait, mais pour de nombreux utilisateurs, il est considéré comme une amélioration..
Travailler avec ces méthodes aide certainement à produire un CSS meilleur, plus structuré. Cependant, la difficulté réside dans le fait qu’il peut devenir fastidieux de saisir manuellement les noms de classe requis dans cette structure, et de garder trace de la façon dont les relations entre les classes peuvent devenir un casse-tête..
Le plugin postcss-bem de Malte-Maurice Dreyer résout ces problèmes grâce à une combinaison de raccourcis et d'imbrication, que vous apprendrez à utiliser au fil de ce didacticiel..
Mais tout d’abord, commençons par une brève introduction aux méthodes BEM et SUIT afin de vous donner une idée claire des avantages de l’utilisation du plugin postcss-bem et de la manière dont il est utilisé..
En BEM des blocs sont des morceaux de haut niveau d'une conception; les blocs de construction à partir desquels le site est fabriqué. Un bloc doit être un élément de votre site indépendant des autres éléments et peut théoriquement être placé n'importe où dans votre mise en page, même s'il est imbriqué dans un autre bloc..
Par exemple, le formulaire de recherche «blocs» de votre site peut utiliser la classe. .formulaire de recherche.
Un élément dans BEM est une sous-section à l'intérieur d'un bloc. Ils sont signifiés en ajoutant un soulignement deux __ séparateur et un nom d'élément au nom du bloc parent.
Par exemple, un formulaire de recherche peut inclure des éléments d'en-tête, de champ de texte et de bouton d'envoi. Leurs noms de classe pourraient être .formulaire de recherche, .formulaire-de-recherche et .formulaire de recherche __soumettre-bouton respectivement.
UNE modificateur est appliqué à un bloc ou à un élément pour indiquer un changement dans sa présentation ou un changement dans son état. Ils sont signifiés en ajoutant un séparateur et un nom de modificateur au bloc ou à l'élément en question..
Les documents officiels du site BEM indiquent que les séparateurs de modificateurs doivent être un simple trait de soulignement. _. Cependant, la convention "à la BEM" des Directives CSS de Harry Roberts utilise deux tirets -- et est probablement plus largement utilisé et connu que la convention officielle BEM.
Par exemple, dans une conception, vous souhaiterez peut-être présenter les formulaires de recherche avancée différemment des formulaires de recherche habituels et créer ainsi la classe de modificateur. .formulaire de recherche_avancé (BEM officiel) ou .formulaire de recherche - avancé (BEM-like).
Dans un autre exemple, vous souhaiterez peut-être modifier l'apparence du formulaire en raison d'un changement d'état, par exemple si un contenu non valide vient d'être soumis, et créer ainsi le modificateur. .formulaire de recherche_invalide (BEM officiel) ou .formulaire de recherche - invalide (BEM-like).
SUIT comprend Utilitaires et Composants. Dans les composants, il peut y avoir Modificateurs, Descendance et États.
SUIT utilise une combinaison de pascal case (PascalCase), de camel case (camelCase) et de tirets. Ses conventions imposent une limite au nombre de tirets et de traits de soulignement, qui peut parfois être source de confusion, pouvant apparaître dans BEM. Par exemple, la classe BEM .formulaire-de-recherche serait .SearchForm-textField en costume.
Utilitaires gérer la structure et le style de position et sont écrits de manière à pouvoir être appliqués n’importe où dans un composant. Ils sont préfixés avec vous- et écrit en camel cas. Par exemple, .u-clearFix.
UNE composant dans SUIT prend la place d'un bloc à BEM. Les composants sont toujours écrits en majuscules et ne sont qu'une partie de SUIT qui utilise des majuscules, ce qui les rend faciles à identifier. Par exemple, .Formulaire de recherche.
Les composants peuvent éventuellement être préfixés avec un espace de noms et un tiret unique nmsp- pour éviter les conflits, par exemple. .mine-SearchForm.
UNE descendant dans SUIT remplace un élément à BEM. Il utilise un tiret unique - et est écrit en cas de chameau. Par exemple .RechercheFormulaire, .SearchForm-textField et .SearchForm-submitButto.
SUIT utilise modificateurs tout comme BEM, leur rôle est toutefois contrôlé plus étroitement. En règle générale, un modificateur SUIT s’applique directement à un composant et non à un descendant. Il ne doit pas non plus être utilisé pour représenter les changements d'état, car SUIT a une convention de dénomination dédiée pour les états..
Les modificateurs sont écrits en caractères camel et précédés de deux tirets. --. Par exemple, .SearchForm - avancé.
Etat les classes peuvent être utilisées pour refléter les modifications apportées à l'état d'un composant. Cela leur permet de se distinguer clairement des modificateurs, qui reflètent une modification de l'apparence de base d'un composant, quel que soit son état. Si nécessaire, un état peut également être appliqué à un descendant.
Les États sont préfixés par est- et sont écrits en cas de chameau. Ils sont également toujours écrits en tant que classes adjacentes. Par exemple .SearchForm.is-invalid.
Maintenant que vous avez l'essentiel de BEM et SUIT, il est temps de configurer votre projet..
Vous aurez besoin d'un projet vide en utilisant soit Gulp ou Grunt, selon vos préférences. Si vous n'avez pas encore de préférence pour l'un ou l'autre, je vous recommande d'utiliser Gulp, car vous aurez besoin de moins de code pour atteindre les mêmes objectifs. Vous devriez donc le trouver un peu plus simple à utiliser..
Vous pouvez lire comment configurer des projets Gulp ou Grunt pour PostCSS dans les tutoriels précédents.
respectivement.
Toutefois, si vous ne souhaitez pas configurer votre projet à partir de zéro, vous pouvez télécharger les fichiers source joints à ce didacticiel et extraire le projet de démarrage Gulp ou Grunt fourni dans un dossier de projet vide. Puis avec un terminal ou une invite de commande pointée sur le dossier, exécutez la commande npm installer.
Ensuite, vous devrez installer le plugin postcss-bem. Nous allons également installer un plugin qui peut très bien fonctionner avec: imbriqué postcss.
Que vous utilisiez Gulp ou Grunt, exécutez la commande suivante dans le dossier de votre projet:
npm installer postcss-bem postcss-imbriqué --save-dev
Nous sommes maintenant prêts à charger les plugins dans votre projet.
Si vous utilisez Gulp, ajoutez ces variables sous les variables déjà présentes dans le fichier:
Accentsconagua
var bem = require ('postcss-bem'); var nested = require ('postcss-nested');Maintenant, ajoutez chacun de ces nouveaux noms de variables dans votre processeurs tableau:
processeurs var = [bem, imbriqué];
Faites un test rapide pour vérifier que tout fonctionne en exécutant la commande gulp css puis en vérifiant qu'un nouveau fichier “style.css” est apparu dans le dossier “dest” de votre projet.
Si vous utilisez Grunt, mettez à jour le processeurs objet, qui est imbriqué sous le options objet, à ce qui suit:
processeurs: [require ('postcss-bem') (), require ('postcss-nested') ()]Faites un test rapide pour vérifier que tout fonctionne en exécutant la commande grunt postcss puis en vérifiant qu'un nouveau fichier “style.css” est apparu dans le dossier “dest” de votre projet.
Ok, vous êtes prêt à partir. Apprenons à générer une structure BEM et SUIT.
Il peut y avoir une certaine lourdeur dans la structure BEM ou SUIT lors de l'écriture manuelle du code, car répéter en permanence les mêmes identifiants dans les noms de classe peut devenir fastidieux et il peut être fastidieux de savoir quels éléments et quels descendants appartiennent à quels blocs et composants peuvent prêter à confusion.
Toutefois, lorsque vous utilisez postcss-bem, il devient facile de comprendre la structure de votre code en un coup d'œil et la répétition de la saisie des noms de classe devient pratiquement inexistante..
Malgré son nom, postcss-bem affichera par défaut la syntaxe SUIT plutôt que BEM. Vous pouvez afficher la syntaxe BEM, ce que nous verrons plus tard, mais le plug-in est principalement conçu pour générer SUIT. Pour cette raison, nous allons commencer par la syntaxe SUIT..
Pour créer un composant, utilisez la syntaxe @component ComponentName ….
Essayez ceci en ajoutant un Formulaire de recherche composant de votre fichier “src / style.css”:
@component SearchForm padding: 0; marge: 0;
Compilez-le et votre code résultant devrait être:
.SearchForm padding: 0; marge: 0;
Pour créer un descendant, utilisez la syntaxe @descendent descName … imbriqué dans le composant parent.
Ajouter un descendant nommé champ de texte à l'intérieur de votre Formulaire de recherche composant comme si:
@component SearchForm padding: 0; marge: 0; / * Nid descendant sous composant * / @descendent textField border: 1px solid #ccc;
Après la compilation, vous devriez maintenant voir:
.SearchForm padding: 0; marge: 0; .SearchForm-textField border: 1px solid #ccc;
Créer un modificateur à un composant avec la syntaxe @nom de modificateur …, imbriqué à l'intérieur du composant qu'il effectue. Les modificateurs doivent généralement être placés en haut de votre composant, au-dessus des descendants et des états..
Ajouter un modificateur nommé Avancée à ton Formulaire de recherche composant avec le code suivant:
@component SearchForm padding: 0; marge: 0; / * Généralement, placez les modificateurs au-dessus des descendants * / @modifier advanced padding: 1rem; @descendent textField border: 1px solid #ccc;
Recompilez votre code et vous devriez voir votre nouveau Avancée modificateur de composant:
.SearchForm padding: 0; marge: 0; .SearchForm - advanced padding: 1rem; .SearchForm-textField border: 1px solid #ccc;
Les états sont créés via la syntaxe @when name … et peut être imbriqué dans un composant ou un descendant.
Ajouter un état nommé invalide à ton champ de texte descendant utilisant ce code:
@component SearchForm padding: 0; marge: 0; @modifier advanced padding: 1rem; @descendent textField border: 1px solid #ccc; / * Ceci crée un état pour le descendant de textField * / @when invalide border: 1px solid red;
Maintenant, lorsque vous compilez votre code, vous verrez qu'il contient votre nouveau invalide Etat:
.SearchForm padding: 0; marge: 0; .SearchForm - advanced padding: 1rem; .SearchForm-textField border: 1px solid #ccc; .SearchForm-textField.is-invalid border: 1px solide rouge;
Vous pouvez nommer vos composants, ainsi que tous leurs descendants, modificateurs et états imbriqués, en les entourant de @ composant-name namespace …. Vous pouvez, si vous le souhaitez, envelopper la totalité de votre feuille de style avec cet espace de noms afin que toutes vos classes en soient automatiquement préfixées.
Essayez ceci en enveloppant tout votre code jusqu'à présent avec @ composant-namespace mine …:
@ composant-namespace mine @component SearchForm padding: 0; marge: 0; @modifier advanced padding: 1rem; @descendent textField border: 1px solid #ccc; @when invalide border: 1px solid red;
Après la compilation, vous verrez que maintenant chacun de vos composants est préfixé par mien-:
.mine-SearchForm padding: 0; marge: 0; .mine-SearchForm - advanced padding: 1rem; .mine-SearchForm-textField border: 1px solid #ccc; .mine-SearchForm-textField.is-invalid border: 1px solid red;
Les utilitaires sont créés avec la syntaxe @utility utilityName …. Vous vous souviendrez que lors de la configuration de votre projet, vous avez installé le plug-in postcss-nested. Nous avons fait cela car il peut être très pratique d’utiliser à l’unisson avec postcss-bem, comme vous le verrez dans cet exemple où nous créons un clearFix utilitaire:
@utility clearFix &: before, &: after content: ""; affichage: table; &: after clear: both; / * Si supportant IE 6/7 * / * zoom: 1;
Après avoir ajouté le code ci-dessus, compilez et vous verrez que ce nouvel utilitaire a été créé:
.u-clearFix / * Si vous supportez IE 6/7 * / zoom: 1; .u-clearFix: avant, .u-clearFix: après content: ""; affichage: table; .u-clearFix: after clear: both;
Pour activer la sortie de la syntaxe BEM dans postcss-bem, passez l'option style: 'bem' dans votre Gulpfile ou Gruntfile comme ceci:
/ * Gulpfile * / var processors = [bem (style: 'bem'), imbriqué]; / * Gruntfile * / processeurs: [require ('postcss-bem') (style: 'bem'), require ('postcss-imbriqué') ()]Par défaut, postcss-bem utilisera le séparateur officiel pour modifier un seul soulignement. _. S'il est important pour votre projet que vous utilisiez le séparateur plus commun de deux tirets -- à la place, vous pouvez modifier la configuration du plug-in postcss-bem en accédant au dossier node_modules / postcss-bem de votre projet, en ouvrant index.js, en localisant la ligne 15 et en modifiant ce qui suit:
bem: separators: namespace: '-', descendant: '__', modificateur: '_'
… pour ça:
bem: separators: namespace: '_', descendant: '__', modificateur: '-'
Puisqu’un «bloc» dans BEM est en corrélation avec un «composant» dans SUIT, utilisez la syntaxe @composant nom-bloc … générer un bloc.
Créer un formulaire de recherche bloquer ajouter ce code:
@component search-form padding: 0; marge: 0;
Puis compilez et vous devriez voir:
.formulaire de recherche padding: 0; marge: 0;
Comme un «élément» dans BEM est corrélé à un «descendant» dans SUIT, ils peuvent être créés avec la syntaxe @descendent nom-élément … imbriqué dans le bloc parent.
Créer un champ de texte élément ajouter ce qui suit:
@component search-form padding: 0; marge: 0; @descendent text-field border: 1px solid #ccc;
Lors de la compilation, vous verrez que votre nouvel élément a été créé:
.formulaire de recherche padding: 0; marge: 0; .search-form__texttext-field border: 1px solid #ccc;
Même si BEM autorise les modificateurs à la fois pour les blocs et les éléments, le plug-in postcss-bem ne les traitera que s'ils sont imbriqués dans des blocs et non des éléments, en raison de la convention SUIT des modificateurs appliqués aux composants non descendants. Ils peuvent être créés avec la syntaxe @nom de modificateur …, imbriqué dans son bloc parent.
Ajouter un Avancée modificateur à votre formulaire de recherche composant comme si:
@component search-form padding: 0; marge: 0; @modifier advanced padding: 1rem; @descendent text-field border: 1px solid #ccc;
Et sur compilation cela donnera:
.formulaire de recherche padding: 0; marge: 0; .search-form_advanced padding: 1rem; .search-form__texttext-field border: 1px solid #ccc;
En mode BEM, le @utilitaire et @quand les syntaxes ne compileront rien, BEM n'utilisant ni utilitaire ni état.
Cependant, même si cela ne fait généralement pas partie de BEM, le @ composant-namespace La syntaxe fonctionnera toujours si vous souhaitez l’utiliser dans votre feuille de style BEM. Il préfixera vos cours avec prénom--:
.mine - formulaire de recherche padding: 0; marge: 0; .mine - search-form_advanced padding: 1rem; .mine - formulaire de recherche __ texte-champ bordure: 1px solide #ccc;
Maintenant, vous savez comment raccourcir votre développement BEM et SUIT et simplifier davantage le processus. Résumons tout ce que nous avons couvert:
@composant, @descendent, @modificateur etc.@ composant-name namespace … Ensuite, nous examinons un autre excellent moyen de tirer parti de PostCSS: créer une boîte à outils de raccourcis et de raccourcis que nous pouvons utiliser pour rendre notre codage plus rapide et plus efficace..
on se verra là bas!
