Travailler avec BEM à grande échelle

Cet article explore les défis et les meilleures pratiques d'utilisation de la méthodologie CSS BEM (bloc, élément, modificateur) à grande échelle, en s'appuyant sur des idées de développeurs expérimentés. La question principale abordée est de savoir comment gérer efficacement la complexité de BEM dans les grands projets.

L'article commence par mettre en évidence une idée fausse commune: trop nidite. Bien que la structure BEM de base (.block__element--modifier) soit simple, de nombreux développeurs étendent à tort cela à des niveaux excessifs (par exemple, .block__element__subelement--modifier). Le consensus parmi les développeurs interrogés est de limiter généralement la nidification à un ou deux niveaux. La nidification profonde réduit la lisibilité et la maintenabilité, et indique souvent un besoin d'une meilleure portée ou restructuration des blocs. Un développeur suggère d'utiliser des noms d'éléments plus longs et plus descriptifs au lieu d'ajouter des niveaux de nidification supplémentaires. Un autre offre une analogie convaincante comparant la nidification excessive pour définir de manière rigide une structure DOM dans CSS, plaidant pour une approche plus flexible. Cependant, tous les développeurs ne respectent pas strictement cette limite à deux niveaux; Certains trouvent que la nidification plus profonde est parfois nécessaire.

La portée du bloc approprié est cruciale. L'article souligne à commencer par les plus petites unités les plus autonomes, évitant les définitions de blocs trop larges qui englobent des éléments non liés. Cette approche assure une meilleure modularité et une meilleure réutilisabilité.

L'organisation des fichiers CSS est un autre aspect clé. Plusieurs développeurs plaident pour une structure à un fichier par bloc, favorisant la modularité et la facilité de maintenance. D'autres combinent cela avec des éléments de SMACS, créant une approche hybride. L'article traite également de l'ITCSS (Triangle Inversé CSS), une méthodologie qui structure CSS basée sur la spécificité, l'explicitation et la portée, offrant un système de superposition structuré pour gérer de grands projets CSS.

L'utilisation de noms de classe longs et descriptives est encouragée sur les abréviations cryptiques pour améliorer la lisibilité du code et la maintenabilité. L'article conseille fortement de l'utilisation de SASS @extend avec BEM, préférant une approche multi-classes en HTML pour maintenir une relation claire entre les classes et éviter de faire exploser le CSS. Cette approche permet une plus grande flexibilité et une modification plus facile.

Enfin, l'importance du libellé du CSS est soulignée pour appliquer les conventions de dénomination et assurer la cohérence entre les équipes. L'article aborde également la pile Yandex BEM plus large, qui comprend des outils pour JavaScript et les modèles, mais reconnaît que de nombreux développeurs se concentrent uniquement sur la méthodologie CSS. La conclusion souligne l'importance de trouver un flux de travail qui convient à l'équipe et au projet, en combinant des outils et des techniques provenant de diverses sources. Les avantages des composants bien documentés et structurés sont mis en évidence, ainsi que la nécessité d'éviter la sur-automation pour une meilleure portabilité.

L'article se termine par une section de questions fréquemment posées couvrant divers aspects de BEM, sa comparaison avec d'autres méthodologies et des conseils pratiques pour la mise en œuvre et la mise à l'échelle.

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!