Catégories
Astuces et Design

Vent arrière contre BEM

Spoilers! Comme pour tant de choses, la réponse est «ça dépend». Comment venir? Lis
sur.

Tailwind et BEM sont deux approches de l'écriture et
maintenir CSS. Les comparer, c'est un peu comme comparer des pommes et des oranges, en
que tant qu’ils sont séparés, ils sont encore des fruits. C'est dire qu'avoir un
approche pour gérer votre CSS – comme tout autre code – est une bonne chose.

Tailwind est le plus récent des deux, avec la première version stable en mai de
2019
. BEM est devenu open source en 2010,
même si cela existe depuis 2006. Il y a de bonnes chances que si vous travaillez sur
un projet Web moderne, vous trouverez l'une de ces approches.

Je ne vous ennuierai pas avec les détails de mes expériences, mais je dirai que
Je suis consultant depuis plus de cinq ans et j'ai une expérience pratique
en utilisant à la fois sur une variété de projets et d'échelles. Voici les avantages et
inconvénients pour les deux:

Tailwind fournit une série de classes pré-écrites avec lesquelles travailler. Ces classes
sont des CSS utilitaires, c'est-à-dire de nombreuses petites classes à usage unique qui sont assemblées
en masse pour créer un effet visuel global.

Avantages Tailwind

  • L'approche utilitaire CSS crée une approche de style API pour penser le CSS,
    ce qui aide de nombreux développeurs à travailler avec.
  • Les classes CSS utilitaires sont faciles à basculer et à gérer via JavaScript.
  • Les classes de Tailwind créent des valeurs par défaut sensibles, avec des considérations et
    propriétés que de nombreux développeurs ne connaissent pas.
  • Parce que vous décrivez à quoi ressemble quelque chose plutôt qu'à ce que c'est, vous évitez
    problème classique de «nommer les choses».
  • Une approche CSS utilitaire maintient la spécificité faible sur l'ensemble de votre
    site Web ou application Web.
  • La mise en œuvre de Tailwind sera très similaire dans plusieurs projets et
    équipes, ce qui facilite la familiarité entre les projets.

Inconvénients du vent arrière

  • Vous devez apprendre les noms de classe Tailwind en plus d'apprendre la propriété CSS
    noms pour déterminer le style visuel souhaité. Tailwind dépend de, et
    sera survécu par CSS, il est donc plus avantageux à long terme de se concentrer sur CSS »
    capacités directement.
  • Tailwind décrit la plupart des capacités CSS, mais pas toutes, en particulier les plus récentes
    fonctionnalités.
  • Tailwind fonctionne mieux lorsqu'un système de composants est présent. Sans ce genre
    d'abstraction, il devient difficile de maintenir la cohérence des instances de composants.
  • En raison des conventions de style partagées entre les composants, Tailwind crée souvent
    petites collections de classes communes. Cela représente une opportunité pour
    l'abstraction dans Sass, mais va à l'encontre d'une approche CSS utilitaire.
  • Les composants compliqués peuvent être difficiles à rendre réactifs, avec des
    classes créant beaucoup de désordre de nom de classe.
  • Tailwind a besoin d'un outil de construction pour fonctionner et profite grandement d'un autre
    tâche qui supprime les classes inutilisées.

Au lieu de noms de classes prédéfinis à partir desquels tirer, BEM est une méthodologie pour informer
comment décrire les choses. C’est une technique mise au point par Nicolle
CSS orienté objet (OOCSS) de Sullivan.

BEM signifie Block, Element, Modifier, un acronyme utilisé
pour décrire sa méthodologie de style. Les blocs sont des entités autonomes, ce que nous
considérez un composant. Les éléments sont les parties du composant et les modificateurs
servent d'indicateurs pour modifier conditionnellement l'apparence ou l'état de l'utilisateur.

Avantages BEM

  • BEM vous permettra de décrire n'importe quel composant d'interface utilisateur que vous pouvez imaginer
    de manière flexible et extensible. Comme c'est une approche pour encapsuler le plein
    gamme de propriétés CSS, il vous permettra de styliser les choses Tailwind simplement
    n'a pas de cours pour — pensez à des expériences hautement dirigées par l'art.
  • BEM adhère au principe de responsabilité unique,
    avec chaque classe concentrée sur la gestion d'une seule chose – elle-même. Cela en fait un
    excellent moyen de construire de manière modulaire quelque chose, surtout si la taille des éléments ou
    changement d'emplacement conditionnellement.
  • BEM encourage l'utilisation d'espaces de noms pour les composants, permettant à un auteur de
    déterminer quelles classes sont utilisées pour des éléments tels que les mises en page, les composants et
    Etat.
  • Comme il utilise du CSS créé et non des classes prédéfinies, la logique Sass et le CSS
    les propriétés personnalisées peuvent être facilement insérées dans les classes BEM.
  • BEM peut être amélioré par un outil de construction ou un préprocesseur, mais ne nécessite pas
    leur. Cela le rend extrêmement portable.
  • Une feuille de style construite avec BEM sera seulement aussi grande que la quantité de code
    écrit. Aucune classe supplémentaire ne nécessite une suppression automatique.

Inconvénients du BEM

  • BEM fonctionne à plein régime dans l'un des problèmes les plus difficiles de l'ordinateur
    science-nommer des choses. Vous devez non seulement décrire votre
    composant, mais aussi toutes ses parties constitutives et leurs états.
  • La dénomination est encore plus compliquée lorsqu'elle est répartie dans une équipe, en particulier
    une plus grande équipe. Chaque membre de l'équipe écrivant BEM augmente de façon exponentielle les chances
    du style duplicatif, ainsi qu'une ambiguïté potentielle sur le moment et le lieu
    appliquez les bons noms de classe.
  • Il n'y a pas de mécanisme en dehors de la révision du code par un pair compétent pour
    empêcher un développeur inconnu ou pressé de gifler dans un
    Élément ou classe de modificateur dans un bloc car il crée l'effet visuel
    ils essaient de réaliser.
  • BEM peut facilement être sur-étendu sans discipline appropriée. J'ai vu ma foire
    part des sélecteurs de petits-enfants (classes d'éléments collées sur un
    classe d'élément), un signal clair qu'un refactor est en ordre.
  • Des projets extrêmement volumineux avec de nombreux composants différents créeront de grands
    feuilles de style, potentiellement suffisamment volumineuses pour dépasser celles de Tailwind.
  • L'état de l'utilisateur est parfois mieux décrit par un
    attribut sémantique stylé au lieu d'une classe de modificateur.

Personnellement, j’ai vraiment apprécié CUBE CSS, une nouvelle approche qui
capitalise sur les points forts des deux approches (plus une belle touche de axiomatique
CSS
). Et capitaliser sur les points forts est le nom du jeu: par
en gardant l'esprit ouvert sur ce genre de choses, vous êtes en mesure de vous adapter
défis que chaque projet exige.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *