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.