BEM et SMACSS: conseils de développeurs qui ont été là

Les méthodologies CSS peuvent être confuses et difficiles à décider. Considérons deux des options les plus connues: BEM et SMACSS.

devriez-vous en choisir un pour votre prochain projet? À quoi sont-ils les mieux adaptés? Qu'est-ce qui pourrait mal tourner? Si vous travaillez déjà avec un - l'utilisez-vous comme prévu? Au plus grand potentiel? Comment savez-vous si vous le faites bien? Je pensais que je serais gentil de demander aux gens qui ont déjà traversé ces questions dans leurs propres projets et à apprendre de leurs expériences.

J'ai demandé aux développeurs qui ont travaillé avec BEM et / ou SMACSS pour leurs histoires de réussite, leurs histoires d'horreur, leurs conseils et leurs mots de prudence. J'ai donné à certains développeurs toute une liste de questions et d'autres m'ont juste en train de former gratuitement leurs pensées. J'ai compilé les résultats dans ce que j'espère être une lecture précieuse pour ceux qui envisagent d'optimiser leur CSS.

Regarder devenir le héros CSS de votre bureau avec l'architecture CSS Artisanat CSS structuré, maintenable et évolutif Regardez ce cours Regardez ce cours

Pour ceux qui sont nouveaux sur BEM et SMACSS, je vais commencer par donner un aperçu de très haut niveau de ce que BEM et SMACS sont.

Les plats clés

• BEM est polyvalent pour toute taille de projet: BEM n'est pas seulement pour les grands projets; Il est bénéfique pour le maintien d'un code propre et maintenable dans les petits et les grands projets.
• Évite la nidification avec BEM: BEM aide à réduire la complexité du CSS en évitant la nidification excessive des sélecteurs, ce qui est courant dans les bases SASS.
• Encapsulation et modularité avec BEM: la méthodologie de l'encapsulation de BEM permet de réutiliser des composants sur différents projets sans reporter les dépendances.
• SMACSS simplifie les transfressions du projet: la catégorisation SMACSS facilite l'explication et la remise des projets, particulièrement utiles dans les paramètres contractuels ou collaboratifs.
• Les approches hybrides peuvent être efficaces: la combinaison de BEM et SMACS peut exploiter les forces des deux méthodologies, permettant une flexibilité et une organisation améliorée dans l'architecture CSS.
• Lire et expérimenter: BEM et SMACS ont leurs mérites et peuvent être utilisés ensemble. La lecture des deux et les expérimenter dans les projets peut conduire à une amélioration de la gestion et du flux de travail du CSS.

Qu'est-ce que BEM?

BEM représente le modificateur de l'élément de bloc et est originaire de Yandex. Il fournit un moyen assez strict d'organiser vos classes CSS en modules indépendants. Il y a quelques variations sur l'idée, mais la plus courante ressemble à ceci:

<span><span>.block</span> {}
</span><span><span>.block__element</span> {}
</span><span><span>.block--modifier</span> {}
</span><span><span>.block__element--modifier</span> {}</span>

Un bloc représente un objet dans votre site Web. Par exemple:

• une personne
• un formulaire de connexion
• un menu
• un formulaire de recherche

Un élément est un composant dans le bloc qui remplit une fonction particulière. Cela ne devrait avoir un sens que dans le contexte de son bloc. Par exemple:

• une main
• un bouton de connexion
• un élément de menu
• un champ de saisie de recherche

Un modificateur est la façon dont nous représentons les variations d'un bloc. Par exemple:

• une personne grande / courte
• un formulaire de connexion condensé (par exemple, nous cachons les étiquettes en une seule version)
• Un menu modifié pour rechercher différemment un pied de page ou un plan du site
• un champ de saisie de recherche avec un style de bouton particulier

Dans l'exemple de notre menu, les noms de classe pourraient ressembler à ceci:

<span><span>.block</span> {}
</span><span><span>.block__element</span> {}
</span><span><span>.block--modifier</span> {}
</span><span><span>.block__element--modifier</span> {}</span>

Il existe d'autres principes architecturaux et outils pour BEM sur le site Web Bem.info, cependant, lorsque les développeurs discutent de BEM, ils sont souvent axés principalement sur la convention de dénomination ci-dessus et cela est vrai de la majorité de la discussion ci-dessous.

Qu'est-ce que SMACSS?

SMACSS est un cadre CSS de Jonathan Snook. Sur le site Web du SMACSS, il dit que cela ressemble plus à un «guide de style» qu'un cadre CSS rigide. Il se concentre sur cinq catégories pour ses règles:

La base est utilisée pour les valeurs par défaut comme HTML, Body, A, A: Hover. Cela inclut vos réinitialisations CSS et se trouvait souvent dans son propre fichier CSS de base ou au début de votre principal CSS.

La disposition divise une page en sections avec des éléments comme l'en-tête, le pied de page et l'article. Souvent, les développeurs montrent des éléments de mise en page en préfixant la classe avec l -.

Le module

est un élément modulaire réutilisable dans la conception. La documentation SMACSS considère les modules comme la majorité de vos éléments et ne nécessite donc pas de les préfixer, mais vous pouvez le faire si vous choisissez.

L'état est utilisé pour les variations possibles pour chaque élément (par exemple actif, inactif, étendu, caché). Ceux-ci sont préfixés avec IS-, par ex. IS-actif, IS-inactive, est expansé, est caché ou est via des pseudo-classes telles que: Hover et: Focus ou Media Queries.

Le thème

est similaire à l'état mais définit à quoi ressemblent les modules et les dispositions. Il est plus applicable à des sites plus grands avec des éléments partagés qui semblent différents tout au long. Vous ajouteriez des variations de thème par page ou par section.

Les éléments enfants de SMACSS (comme ce que «élément» est à un «bloc» dans BEM) ont l'élément parent préfixé avec un tableau de bord. par exemple menu et menu-item.

SMACSS déclare que tout dépend de la préférence des développeurs et n'est pas aussi normatif que BEM. SMACSS fournit simplement des directives de base. Utilisez vos propres conventions de dénomination pour chacune des catégories et organisez-les de votre manière préférée, tant que vous documentez votre approche afin que d'autres développeurs puissent suivre.

Guide de ceux qui ont utilisé BEM

Il est applicable à tous les projets, grands et petits

Hamish Taplin, un développeur frontal de Cardiff, au Royaume-Uni, pense que BEM convient aux projets grands et petits et il offre de nombreux avantages:

"BEM est présenté comme étant pour de grands projets, mais je ne le crois pas du tout. Si vous aimez écrire du code propre, maintenu et ne se battez pas avec des problèmes de spécificité, BEM est pour vous. Certains disent que le HTML qu'il produit est laid ou redondant mais je pense que c'est beau. Je peux lire un HTML et voir exactement ce qui se passe et comment les éléments sont liés les uns aux autres. C'est génial. "

Il évite la nidification

Alec Raeside, un développeur frontal de Sydney, l'Australie a trouvé que BEM était un bon moyen d'éviter trop de nidification des sélecteurs:

«BEM est un bon moyen de construire une interface utilisateur. Les noms de classe descriptifs, parfois longs sont bons pour comprendre tout de suite où cette classe / sélecteur se trouve dans votre architecture d'interface utilisateur. Cela signifie également que vous avez rarement besoin de nicher de sélecteurs, une chute commune avec les bases de code SASS. Habituellement, lorsque je niche avec BEM, c'est quand je veux cibler un élément via le nom de balise HTML, ou pour gagner une bataille de spécificité lorsque le style des composants chevauche. »

Cela vous aide à redécouvrir le pouvoir des classes

Hamish Taplin a chanté les louanges de BEM et de principes orientés objet. Il soulève des pensées intéressantes sur le concept de balisage «sémantique»:

«Les avantages de BEM étaient immédiatement apparentes. Avant d'adopter les principes BEM et OOCSS, j'avais été un défenseur de ce qui est (incorrectement) connu sous le nom de balisage «sémantique». Je pense que beaucoup de développeurs (moi y compris) ont largement mal compris ce que cela signifie réellement et avait négligé le pouvoir des classes sous le couvert de ne pas être «sémantiques». Les moteurs de recherche et les lecteurs d'écran ne se soucient pas des classes que vous utilisez ou des divs supplémentaires utilisés pour une grille. L'ingénieur de Twitter, Nicholas Gallagher, a totalement cloué cela avec son article de blog «À propos de la sémantique HTML et de l'architecture frontale» quand il dit: «… toutes les sémantiques ne doivent pas être dérivées de contenu. Les noms de classe ne peuvent pas être «non sémantes». Quels que soient les noms utilisés: ils ont un sens, ils ont un but. Nom de classe La sémantique peut être différente de celle des éléments HTML. »»

facilite le travail sur des sites plus importants

Une énorme force de BEM que beaucoup de développeurs mentionnent est sa capacité à gérer et à mettre en œuvre des projets importants et modulaires de manière plus propre. Bien que BEM ne soit pas seulement pour les grands sites, il semble avoir de grands avantages dans cet espace. Hamish a discuté de son expérience et a même un article de blog entier à ce sujet:

«J'ai essayé quelques petits projets et j'ai réussi à saisir - c'était assez difficile au début car c'était contraire à la façon dont je travaillais depuis des années, mais les avantages devenaient évidents. Ensuite, nous avons commencé un projet assez grand et de nature très modulaire - mes compétences en santé. Ce fut le premier projet Bluegg sur lequel je travaillais où je travaillais avec un autre développeur (Paul Goodfield, qui avait également utilisé BEM) - j'ai fait le front-end et Paul le backend. Les avantages étaient immédiatement évidents, Paul pouvait comprendre exactement ce que faisait mon balisage et écrire ses modèles Laravel autour de lui. S'il avait besoin de combler quelques lacunes, la nature prévisible de BEM signifiait qu'il pouvait écrire le HTML comme je l'aurais fait et tout le processus a été rendu beaucoup plus fluide. J'ai écrit à ce sujet dans un article de blog «Building My Health Skills». »

Alec Raeside a également trouvé des avantages pour les grands projets à travers la nature modulaire de la dénomination de BEM. Il dit:

«BEM est bien adapté aux grands projets. CSS est complexe et les grands projets peuvent tomber dans lesquels les sélecteurs non spécifiques peuvent provoquer des conséquences involontaires ailleurs. Par exemple, le ciblage de tous les

sous un sélecteur comme .Container UL {} peut fonctionner lorsque ce code a été écrit, mais une fois que de nombreux autres composants sont imbriqués dans un composant. Avec l'encapsulation et la spécificité au cœur de la méthodologie BEM, il peut aider à empêcher les affrontements de dénomination entre les composants et les sélecteurs non spécifiques de styliser accidentellement une partie de la page.

La méthodologie BEM résume votre code pour réutiliser

Harry Roberts, un architecte, concepteur et développeur consultant du Royaume-Uni qui a contribué à des idées dans le domaine du BEM et de la création de CSS propre, a souligné que la méthodologie BEM facilite la réutilisation des composants sur tous les sites Web à travers son encapsulation:

«La méthodologie BEM est parfaitement adaptée aux projets où vos composants pourraient avoir besoin d'être déplacés d'une base de code à une autre; Ils doivent être pleinement encapsulés afin que vous puissiez simplement déplacer un morceau de HTML, CSS, JS à un autre projet, et vous n'avez pas à emporter de dépendances avec vous. Imaginons que vous travaillez pour une entreprise qui a cinq sites différents, et ils ont tous besoin du même carrousel sur la page d'accueil. Vous écrivez ce carrousel dans la méthodologie BEM afin que vous puissiez le ramasser en un seul morceau et le déplacer. »

fonctionne bien avec les frameworks avec une focalisation basée sur des composants

Josh Hunt, un développeur frontal de Sydney, a trouvé qu'il jouait bien avec d'autres cadres avec une focalisation composante similaire:

«BEM fait très bien pour les sites qui ont beaucoup de widgets ou de composants autonomes, comme les applications Web. Les cadres qui favorisent les composants HTML (composants angulaires, réagis, polymère / web) facilitent également l'application de méthodologies BEM. »

moyen rapide de livrer des prototypes

Bob Donderwinkel, un développeur frontal de Rotterdam, aux Pays-Bas, a fait une excellente présentation sur «les avantages du BEM CSS». Il souligne le plus grand avantage qu'il a trouvé en travaillant avec BEM:

«Je me tamponne avec BEM depuis un demi-année maintenant et je l'ai utilisé dans deux projets: une nouvelle page de galerie de défilement pour www.viewbook.com et retravaille un ancien site Flash vers une version HTML. Les conceptions de ces projets ont été bien définies et je dirais que la plus grande victoire utilisant BEM a été de livrer rapidement un prototype. Et c'est principalement parce que «déchiffrer» votre conception en blocs, éléments et modificateurs vous donne une bonne longueur d'avance pour coder certains CSS. »

vous fait réfléchir deux fois

Josh Hunt constate que la convention de dénomination vous aide à réfléchir à deux fois avant de rendre les choses trop complexes:

"J'ai trouvé en raison du fait que c'est un peu moche, cela vous oblige à réfléchir à deux fois lorsque vous allez écrire des noms de classe très longs."

Assurez-vous de planifier!

Hamish Taplin a également fourni ces conseils pour ceux qui commencent un nouveau projet:

«Ayez un certain degré de planification lorsque vous démarrez un projet. J'ai tendance à passer par les maquettes et à rechercher des motifs que je peux résumer en modules BEM. Cela peut être difficile au début, mais vous vous améliorez au point où vous commencez à réutiliser les anciens modèles. La réutilisation du code est le nirvana du développement et quelque chose que votre patron vous remerciera lorsque les coûts de production baissent parce que vous êtes plus efficace! »

Ne soyez pas trop strict avec

Josh prévient de devenir trop restrictif avec vos projets lorsque vous visez à utiliser BEM:

"Ne vous sentez pas restreint par BEM ou ne vous sentez pas comme si vous soyez obligé de suivre un modèle étrange. Je suis attiré par ces deux tweets par Harry Roberts:

Cela ne veut pas dire la modularité, le sec, SRP, etc. ne sont pas de grandes idées - elles le sont! - mais comprennent qu'ils sont des approches et non des réalisations.

- Harry Roberts (@csswizardry) décembre 2, 2014

Josh explique: "BEM ne devrait pas être l'objectif d'un projet, ce devrait être quelque chose que vous gardez à l'esprit lorsque vous développez et que vous vous appliquez là où vous êtes utile. Ne vous laissez pas trop emporter en essayant de respecter une «norme» théorique. Les classes d'assistance (comme .pull-droite ou .Text-cent) sont totalement cool à coexister avec BEM. Où vous auriez pu faire, fera aussi bien (peut-être encore mieux).

Si vous hésitez, sautez et essayez-le

Hamish n’a pas tout de suite fait le saut dans BEM. Il a fallu un peu de temps, une présentation influente et un changement d'emploi pour le faire réévaluer et mettre BEM à repenser ses cours. Mais il est content de l'avoir fait.

«J'avais vu BEM mentionné plusieurs fois et j'ai pensé qu'il avait l'air intéressant mais que je me poursuivais, essayant de minimiser la quantité de balisage et de cours que j'écrivais, en utilisant SASS @Extend pour contourner les problèmes que cela cause . Un jour, j'ai regardé la vidéo de Harry Roberts «Breaking Good Habits» et j'ai été époustouflé. Ce gars était sur le point - quels problèmes résolvaient-nous en faisant cela? »

Hamish poursuit en disant: «Je déménageais des emplois à l'époque, à partir de mon emploi actuel chez Bluegg et je l'ai vu comme une pause propre pour essayer de BEM.»

J'ai demandé à Harry, ce même développeur qui a époustouflé Hamish avec son discours sur "Breaking Good Habits" et qui a inspiré Josh avec ses tweets, s'il avait des histoires de réussite particulières à partager. Ses paroles ont fait écho à la mentalité de «donner un coup»:

"Chaque projet sur lequel j'ai travaillé a bénéficié de la convention de dénomination du BEM. Ce n'est pas une chose qui change instantanément, il est donc difficile de citer des réussites en soi: ce n'est généralement que l'une des nombreuses parties qui se réunissent pour créer un bien meilleur. Comme un volant lui-même n'est pas très profond, mais c'est une partie vitale d'une voiture; La dénomination du bem est une chose qui rend un projet entier beaucoup meilleur.

«Le plus proche que j'ai à une réussite, c'est peut-être le moment où j'ai introduit le nom de bem à un de mes clients. Il avait évité Bem dénommer pendant très, très longtemps, citant le souvent utilisé "Mais c'est tellement moche!" Je l'ai convaincu de l'essayer au moins d'un projet pendant seulement une demi-journée et de voir ce qu'il pensait alors. Il a adoré. Après seulement quelques heures, il mettait des soulignements ici et les doubles hyphens ici. C'est toujours génial de voir des gens avoir ce moment de l'ampoule. »

Harry a également posé la question suivante pour ceux qui sont incertains:

"Si vous n'êtes pas sûr de BEM, répondez à cette question: qu'est-ce qu'il n'y a pas à aimer d'une manière stricte, transparente et significative de nommer les choses? Honnêtement, il n'y a pas de inconvénients à utiliser la dénomination de BEM. »

Je laisserai les derniers mots à ce sujet à Hamish Taplin qui a dit:

«Essayez-le. BEM consiste à résoudre des problèmes, alors voyez si cela le fait pour vous. Je l'ai vu rejeté sur de nombreux forums ou discussions par des gens qui ne l'ont jamais essayé et qui souhaitent garder leur balisage «sémantique». J'étais le même jusqu'à ce que je franchis le pas et que cela change complètement toute ma perspective sur la façon dont je devrais écrire HTML et CSS. Vous devez être prêt à vous adapter et à admettre lorsque vous vous trompez si vous voulez créer d'excellents produits. »

Guide de ceux qui ont utilisé SMACSS

facilité de démonstration et de transfert

Chris Wright, un développeur basé à Sydney, est un grand fan de SMACSS et a offert ses conseils. Le principal éloge de Chris de SMACSS est la facilité d'utilisation de ses caractéristiques de catégorisation:

"Une fois que j'ai commencé à tirer parti de la raison pour laquelle SMACSS était si puissant, les caractéristiques de catégorisation, j'ai trouvé que c'était une méthodologie vraiment lisible et enseignable par rapport aux autres méthodologies CSS populaires."

«Je l'ai utilisé comme entrepreneur parce qu'il est tellement plus facile de démontrer aux gens - voici ma feuille de style: les cours avec une disposition de préoccupation en L, les choses avec M- devant ce sont des modules, et ainsi de suite. Bien que je doive encore transmettre et expliquer, le montant que je dois expliquer et documenter a été réduit, ce qui m'a également fait gagner plus de temps en dehors du travail. Depuis l'année dernière, j'ai commencé à l'utiliser sur chaque projet que je peux. »

Bon pour les nouveaux arrivants à une méthodologie CSS

Chris a particulièrement découvert qu'il avait du mal à faire travailler les autres avec les premières versions de BEM et OOCSS, mais SMACSS était plus facile à expliquer:

"J'ai constaté qu'il est beaucoup plus facile d'expliquer à un développeur qui n'a jamais rencontré de méthodologie CSS auparavant - quelle est la valeur de cette méthodologie et comment l'utiliser.

«J'ai essayé pendant un certain temps avec BEM mais j'ai toujours trouvé que les gens se confus. Avec OOCSS, j'ai constaté que les conventions de dénomination des gens étaient souvent partout, mais elles l'ont généralement obtenue. SMACSS offre une catégorisation qui vous aide à voir immédiatement quel est le but d'une classe. »

facilité de lecture

Chris a également déclaré qu'il avait trouvé que les premières versions de BEM étaient un peu verbeuses mais l'avaient vu se développer au fil du temps, il préfère SMACSS ici.

"Aussi d'un point de vue de lecture, tous ces soulignements et tirets et longs classes fous dans BEM avaient tendance à m'en détourner - j'ai vu des versions plus adaptées comme ce que Harry Roberts a fait comme une amélioration assez énorme Sur la méthodologie, mais je n'ai toujours pas l'impression que c'est pour moi.

évolutif pour tous les projets

Chris souligne également que SMACSS n'a pas besoin d'être complètement suivi de la même manière sur des sites plus grands par rapport aux plus petits, ce qui permet la flexibilité et l'applicabilité dans tous les projets:

«Je pense qu'il est prudent de dire que des formes variées de SMACS peuvent convenir à tous les projets. Comme Snook l'indique dans son livre - sur un projet plus petit, vous n'utiliseriez probablement pas de choses comme le thème comme catégorie (T-), mais être capable de différencier une classe de mise en page d'une classe de module d'un coup d'œil est assez précieuse. »

Vous pouvez utiliser SMACSS et BEM

Hamish Taplin adopte en fait une approche hybride, en utilisant certains concepts SMACSS dans son BEM. J'ai trouvé que quelques développeurs ont trouvé un endroit idéal entre les deux, donc il pourrait ne pas être en choisir l'un plutôt que l'autre:

«J'utilise certains concepts SMACSS et je ne les considère pas comme mutuellement exclusifs. J'organise mon sass en «base», «disposition» et «modules» qui sont des conventions largement SMACSS. Je suis également un grand fan de l'utilisation de cours basés sur «State» dans mon JavaScript. Par exemple, un module qui peut être visible ou caché peut avoir des classes IS-visibles ou coiffées contrôlées par JavaScript. Je trouve que cela aide à distinguer ce qui est contrôlé par JavaScript plutôt que d'utiliser des modificateurs de style BEM. Je ne serais pas contre cela. "

Bob Donderwinkel a convenu qu'un mélange de BEM et de SMACS est possible dans la plupart des situations:

«Je dirais que l'utilisation de l'une n'exclut pas l'autre, bien qu'il y ait un chevauchement avec BEM si vous considérez le module et les règles d'état de SMACSS. Mais en plus de cela, vous pouvez mélanger et faire correspondre les deux au besoin. »

Harry Roberts recommande de choisir les meilleurs bits de partout et utilise sa propre méthodologie qu'il appelle «ITCSS» avec une combinaison de BEM, SMACSS et OOCSS.

«J'utilise réellement la méthodologie ITCSS - encore inédite - aux côtés de Smatterings of OOCSS, BEM et SMACSS. Il est extrêmement important de choisir des bits partout, plutôt que de suivre aveuglément une méthodologie jusqu'à la fin amère. J'utilise toujours la dénomination de BEM et j'utiliserais la méthodologie BEM sur les projets où j'ai besoin de composants pleinement encapsulés qui ont besoin de partager sur plusieurs bases de code. J'écrivais ces composants en utilisant OOCSS, puis j'envelopperais ces composants dans une architecture ITCSS.

"Il ne commence pas et ne s'arrête pas avec BEM et SMACSS. ITCSS est conçu pour englober des projets entiers; OOCSS est une super petite méthodologie qui est tout compatible; Des principes solides peuvent être utilisés pour écrire des CS de meilleure qualité. »

Si vous souhaitez en savoir un peu plus sur ITCSS, Harry a une vidéo disponible à regarder. Pour plus d'informations sur les principes CSS solides, Harry a également offert ces deux articles:

• Le principe de responsabilité unique s'appliquait à CSS
• Le principe ouvert / fermé appliqué à CSS

Si vous ne l'avez pas fait, lisez le guide SMACSS

Harry Roberts recommande fortement de lire le guide SMACSS:

"Il suffit de lire dessus. SMACSS est l'un des meilleurs morceaux de lecture frontale qui est sorti au cours des dernières années, et il est très difficile d'être en désaccord avec la logique qu'elle met en avant. »

Histoires d'horreur sur BEM et SMACSS

J'ai essayé d'obtenir des histoires d'horreur et des mots d'avertissement de nos développeurs - des leçons que nous pourrions apprendre de leurs faux pas pendant qu'ils étaient dans le processus d'apprentissage. Voici leurs pensées.

alec raeside sur bem

«C'est une courbe d'apprentissage, ce n'est pas conceptuellement trop difficile à comprendre, mais il faut un certain temps pour changer vos habitudes d'écriture CSS / SASS normal. Il est très facile de ne pas penser d'une manière purement basée sur des composants. J'ai écrit BEM toute l'année et j'ai toujours l'impression d'apprendre et de mettre à niveau ma façon de l'écrire. Parfois, vous devez écrire un peu plus de CSS avec BEM par rapport au CSS non BEM pour réaliser quelque chose qui est ennuyeux, mais il est préférable d'avoir une cohérence.

"BEM en soi ne suffit pas pour construire l'interface utilisateur de la meilleure façon possible, nous combinons BEM, Mobile First CSS, utilisation appropriée de Sass et de normes de codage strictes. Nous ne l'avons pas parfait, mais ça va mieux. Nous avons également récemment commencé à utiliser SCSS-lint pour aider à appliquer nos normes de codage et dans une moindre mesure notre utilisation du BEM. »

Chris Wright sur smacss

"La plupart de mes histoires d'horreur ne sont pas vraiment des histoires d'horreur mais des lieux de douleur. J'ai rencontré des agences qui sont vraiment des framework Bootstrap Hour qui veulent continuer avec une approche OOCSS, ce qui est bien (OOCSS est assez bon aussi) - mais essayer de convaincre quelqu'un qui utilise une approche qui vient avec son cadre particulier à légèrement à légèrement Ajustez leur méthodologie pour leurs projets qui n'utilisent pas le cadre est un argument assez futile à avoir. J'ai donc dû le laisser dans ces cas. La plus grande faiblesse de SMACSS, je dirais, c'est en fait qu'elle est moins largement adoptée que BEM ou OOCSS - il semble que moins de gens en aient entendu parler.

«Mes propres histoires personnelles avec la mise en œuvre n'ont pas été vraiment adhérées au point de la méthodologie. Il est très facile de tomber dans le piège de «Module toutes les choses» et d'oublier que les catégories qui ont été suggérées étaient exactement cela, une suggestion. La partie la plus difficile est de comprendre ce qui se qualifie dans chaque catégorie. Un bouton primaire utilisé à l'échelle mondiale est-il un module appelé .m-btn-primary? Ou est la chose qu'il vit dans le module? Cela peut être déroutant lorsque vous commencez à utiliser les méthodologies, et dans le cas de SMACSS où vous définissez clairement des choses comme la mise en page, les modules et les thèmes; J'ai rencontré quelques situations où j'ai dû m'arrêter et penser à où appartenait quelque chose, mais cela a également été positif pour moi, et le fait est que nous voulons des cours plus organisés que les gens peuvent lire et comprendre facilement. "

Josh Hunt sur bem

«La première fois que l'utilisation de BEM sera le plus souvent un cauchemar. Ma première fois, je créais .classes__bout__five__levels__deep. BEM n'est pas censé être une cartographie un à un de la structure DOM aux noms de classe.

"Ce à quoi j'ai trouvé difficile à appliquer BEM, c'est quand vous avez besoin d'éléments supplémentaires uniquement pour le style, comme .wrapper ou .inner. Ce n'est pas vraiment juste d'avoir un .article __ poticule (intérieur n'est pas un élément d'un article). Parfois, vous pouvez être créatif avec les mots que vous choisissez (div.article__media img.article__img), mais d'autres fois, il est parfaitement bien de «briser» le bem et de faire .article-wrapper ou le .article-inner.

Hamish Taplin sur bem

«Je pense que le plus grand défi avec le BEM est inhérent à l'abstraction - il peut être difficile de se faire la tête parfois. Cela nécessite un certain degré de planification pour repérer les modèles qui peuvent être résumés et vous finissez parfois par avoir à refactor lorsque vous ne repérez pas les choses la première fois. Cela est cependant courant dans le développement et la planification et l'expérience peuvent beaucoup aider.

"Un autre point de collage est qu'il nécessite un contrôle total sur le balisage - quelque chose qui peut être difficile si vous travaillez dans un environnement (comme .NET) où cela n'est pas toujours possible."

Harry Roberts sur bem

"Parce que la dénomination de bem est juste un GoodIDEA ™, il est très rare que vous entendiez des histoires d'horreur. Le plus proche auquel je puisse penser a eu lieu avec un de mes très bons clients au début de l'année. C’était une équipe vraiment diligente qui avait fait beaucoup de recherches et de lecture dans une meilleure architecture CSS, et ils m'ont fait participer à une semaine de formation pour essayer de repasser tous les points difficiles. L'un des endroits les plus rugueux concernait leur mise en œuvre de la dénomination de BEM. Malheureusement, ils avaient lu un article (qui, dans le but de ne pas perpétuer, je ne me lierai pas ici) qui a donné de très très mauvais conseils sur la dénomination de BEM. Des informations fondamentalement erronées qui étaient tout simplement fausses. Le client a suivi ces conseils à la lettre et cela les a mis dans de vrais problèmes. Les choses étaient plus emmêlées et interconnectées que jamais - quelque chose que la dénomination de bem est censée résoudre! C'est cependant le seul incident que je connais. »

Bob Donderwinkel sur bem

"Eh bien, je ne l'appellerais pas exactement une histoire d'horreur;) Mais j'ai fait un petit outil d'échafaudage BEM appelé Kabem. L'erreur que j'ai commise était en utilisant des noms de classe BEM CSS avec plusieurs éléments (comme Block__Element__Element). Principalement parce que cela a aidé à générer une structure de dossiers bien imbriquée basée sur ces noms de classe CSS. En substance, je capturais la structure HTML dans les noms de classe CSS, mais cela rend en fait BEM un peu plus rigide, ce qui n'est pas nécessaire.

«Un autre petit gotcha était que les sélecteurs BEM CSS nicheurs comme vous pouvez le faire avec SASS ou moins ajoute réellement la spécificité CSS là où elle n'est pas nécessaire. BEM fonctionne mieux comme des noms de classe unique, c'est peut-être quelque chose à garder à l'esprit. »

Conclusion

Après avoir traversé les réponses et les idées de chacun, il était clair que la meilleure approche semblait être un hybride. Lisez tout, donnez à BEM et SMACS avec un esprit ouvert et voyez si votre CSS et votre flux de travail s'améliorent. Vous n'avez pas besoin de choisir une méthodologie; Combinez les concepts de quelques méthodologies en une qui fonctionne pour vous et votre équipe. Si vous avez besoin d'aide, il existe de nombreux développeurs prêts à partager certaines pensées et conseils.

crédits

un très grand merci aux développeurs suivants qui ont eu la gentillesse de renoncer à leur temps pour répondre à mes questions et partager leurs pensées et leurs expériences:

• Alec Raeside - Site Web, Twitter
• Bob Donderwinkel - Site Web, Twitter
• Chris Wright - Site Web, Twitter
• Hamish Taplin - Site Web, Twitter
• Harry Roberts - Site Web, Twitter
• Josh Hunt - Site Web, Twitter

Des questions fréquemment posées sur BEM et SMACSS

Quelles sont les principales différences entre BEM et SMACSS?

BEM (bloc, élément, modificateur) et SMACSS (architecture évolutive et modulaire pour CSS) sont les deux méthodologies d'organisation du CSS. BEM est une convention de dénomination qui rend CSS plus facile à lire et à comprendre, tandis que SMACSS est un guide de style qui fournit des règles pour l'organisation CSS. BEM se concentre sur la représentation visuelle du site, tandis que SMACSS se concentre sur la structure et la disposition. BEM utilise une convention de dénomination spécifique pour les classes, tandis que SMACSS classe les styles en cinq types: base, mise en page, module, état et thème.

Comment BEM améliore-t-il l'évolutivité CSS?

BEM améliore le CSS Évolutivité en fournissant une structure claire et compréhensible pour votre CSS. Il utilise une convention de dénomination spécifique qui facilite l'identification de la relation entre les différents éléments et leurs blocs parents. Cela facilite la gestion et l'échelle de grandes bases de code CSS, car elle réduit la probabilité de dénomination des conflits et rend le code plus facile à lire et à comprendre.

Quels sont les avantages de l'utilisation de SMACSS?

SMACSS fournit un ensemble de directives pour organiser votre CSS, ce qui peut rendre votre code plus efficace et plus facile à entretenir. Il vous encourage à classer vos styles, ce qui peut rendre votre CSS plus modulaire et réutilisable. SMACSS favorise également l'utilisation des règles de l'État, ce qui peut faciliter la gestion des styles dynamiques dans votre CSS.

peut-il être utilisé ensemble?

Oui, BEM et SMACS peuvent être utilisés ensemble. Le BEM peut être utilisé comme convention de dénomination dans le cadre SMACSS. Cela peut offrir les avantages des deux méthodologies, BEM facilitant la lecture et de la compréhension de votre CSS, et SMACSS fournissant une approche structurée pour organiser votre CSS.

Comment BEM gère la spécificité CSS?

BEM gère la spécificité CSS en encourageant l'utilisation des classes au lieu des ID pour le style. Cela réduit la spécificité de vos sélecteurs, ce qui rend votre CSS plus facile à gérer et à remplacer. Le BEM décourage également l'utilisation de sélecteurs imbriqués, qui peuvent augmenter la spécificité et rendre votre CSS plus difficile à maintenir.

Comment SMACSS génère la spécificité CSS?

SMACSS gère la spécificité CSS en fournissant des directives sur la façon de savoir comment comment structurez votre CSS. Il encourage l'utilisation des classes sur IDS et décourage l'utilisation de sélecteurs imbriqués. Cela aide à maintenir la spécificité faible, ce qui rend votre CSS plus facile à gérer et à remplacer.

Quels sont les défis de la mise en œuvre de BEM?

L'un des principaux défis de la mise en œuvre de BEM est qu'il peut conduire à Noms de classe longs et complexes. Cela peut rendre votre HTML et CSS plus difficiles à lire et à comprendre. Cependant, cela peut être atténué en utilisant un préprocesseur comme Sass ou moins, qui peut aider à gérer et à simplifier vos classes BEM.

Quels sont les défis de la mise en œuvre de SMACSS?

L'un des principaux des principaux Les défis de la mise en œuvre de SMACS sont qu'il nécessite une bonne compréhension du CSS et de ses meilleures pratiques. Cela nécessite également une approche disciplinée pour écrire et organiser votre CSS. Cependant, une fois que vous avez compris, SMACSS peut rendre votre CSS plus efficace et plus facile à entretenir.

Comment BEM gère-t-il la conception basée sur les composants?

BEM est bien adapté aux composants des composants? - Conception basée, car elle encourage l'utilisation de blocs, qui peuvent être considérés comme des composants individuels. Chaque bloc est indépendant et peut être réutilisé sur tout votre site. Cela fait de BEM un bon choix pour les sites qui utilisent une approche de conception basée sur des composants.

Comment SMACSS gère la conception basée sur les composants?

SMACSS gère la conception basée sur les composants via son concept de modules. Un module est un composant autonome qui peut être réutilisé sur tout votre site. Cela fait de SMACSS un bon choix pour les sites qui utilisent une approche de conception basée sur des composants.

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!