• Assurez la sécurité des applications de la bonne manière! Détectez, protégez, surveillez, accélérez et plus encore…
  • J'ai entendu une fois une blague de développeur front-end, "La NASA a atterri des robots sur Mars, et ici nous avons encore du mal à aligner nos divs au centre!" Et je me sens mal que cette blague contienne beaucoup de vérité. Faire quelque chose qui semble aussi simple et logique que de centrer une boîte dans une boîte est incroyablement difficile à travailler en CSS. Sauf si vous l'avez déjà rencontré. Et enregistré l'extrait de code quelque part. Et même si vous parvenez à le retirer, il y a toujours la peur cachée qu'il puisse simplement casser horriblement sur un navigateur stupide quelque part! CSS est lié à la première place des «maux Web nécessaires» avec JavaScript. C'est une norme qui a évolué au hasard, a été interprétée différemment par différents fabricants de navigateurs et est maintenant si pleine de contradictions que personne n'ose se qualifier d '«expert CSS».

    Il n'est donc pas étonnant que les frameworks CSS aient émergé au fil du temps et aient soulagé l'essentiel de la douleur. Aujourd'hui, nous ne pouvons pas imaginer le codage sans notre framework CSS préféré, car cibler plusieurs tailles d'écran est devenu une nécessité.

    Mais comment savez-vous que votre cadre est le meilleur pour le travail à accomplir? De plus, si vous êtes nouveau dans le développement front-end, quel framework devrait vous aider à choisir?

    Cet article jette un coup d'œil sur le paysage du développement frontal et compare les pionniers parmi les frameworks CSS. Donc, si vous êtes fatigué de coder à la main les règles CSS, plongez-vous pour un soulagement rapide!

    Bootstrap

    Une initiative de Twitter, Bootstrap se félicite de l'introduction de la conception réactive à grande échelle. C'était le premier cadre à promouvoir la philosophie du «mobile d'abord». La conception pour des écrans plus petits n'était plus un projet distinct en soi; tout ce que vous aviez à faire était d'inclure les classes Bootstrap pertinentes, et la conception s'ajusterait automatiquement aux différentes tailles d'écran (enfin, presque).

    Conception réactive dans Bootstrap (4.0 vs 3.0)

    Bootstrap a réalisé un design réactif en introduisant l'idée d'une grille. Une grille est une partition invisible de l'écran en colonnes (avec la largeur). Par exemple, si vous avez trois «boîtes» que vous souhaitez placer côte à côte sur de grands écrans, mais verticalement sur des écrans plus petits, voici ce que vous feriez:

     L'une des trois colonnes L'une des trois colonnes L'une des trois colonnes
    

    La version populaire actuelle de Bootstrap est 4, ce qui était une refonte majeure de la série 3.3. La syntaxe ci-dessus est la façon dont vous coderiez dans Bootstrap 4, qui doit beaucoup de son élégance à la puissance brute de Flexbox et d'autres fonctionnalités de mise en page modernes prises en charge directement par les navigateurs. Dans les versions inférieures de Bootstrap, la grille était définie comme un total de 12 colonnes, ce qui aboutissait à un code tel que

    
    

    pour qu'un div occupe un tiers de la largeur de l'écran sur les appareils de grande taille et la moitié de la largeur sur les appareils de taille moyenne. La syntaxe est maintenant beaucoup plus agréable, même si elle exige une familiarité avec Flexbox.

    Avantages de Bootstrap

    Il y a beaucoup à aimer dans Bootstrap, en particulier pour développeurs full-stack:

    • Prototypage rapide: Avec Bootstrap, il n'est presque pas nécessaire de réfléchir au positionnement délicat des CSS et aux incompatibilités du navigateur. Tout ce dont vous avez besoin pour écrire le code HTML, puis appliquer les classes CSS appropriées provoque la réactivité.
    • Grand écosystème: À ce jour, Bootstrap possède le plus grand écosystème parmi les frameworks frontaux. Le nombre de mises en page de sites Web, de thèmes, de panneaux d'administration, de composants d'interface utilisateur, etc., créés à l'aide de Bootstrap est ahurissant et ne cesse de s'améliorer. Pour les consultants et les entreprises de produits, cela signifie que les articles pré-construits et le soutien de la communauté seront toujours nombreux.
    • Soutenu par Twitter: Une tendance émergente de l'open source est la montée en puissance des projets parrainés par une entité commerciale. Le plus souvent, ces entités construisent des entreprises rentables autour de leur offre. Kotlin (JetBrains), WordPress (Automattic, Inc.), Angular (Google), React (Facebook), etc., en sont quelques exemples. Lorsqu'un projet est soutenu par une entité établie et n'est pas une exposition individuelle, cela donne confiance à la communauté (en particulier aux entreprises clientes) que le projet aura une feuille de route claire et un avenir à long terme.
    • Une grande collection de composants: Bootstrap offre, hors de la boîte, presque tous les composants d'interface utilisateur dont vous aurez probablement besoin. Navigation, formulaires, cartes, modaux, boutons, badges, barres de progression, alertes. . . Vous l'appelez, et Bootstrap l'a. Pour de nombreuses entreprises, cela réduit pratiquement le besoin d'avoir une équipe frontale dédiée.
    • Prise en charge de LESS et SASS: Parmi les frameworks CSS très populaires, Bootstrap est le seul qui prend en charge à la fois LESS et SASS. Oui, je sais, vous n'utilisez pas LESS (comme aucun développeur qui se respecte, n'est-ce pas?), Mais bon, il existe des projets massifs qui reposent sur MOINS. Bien sûr, vous pouvez choisir ni l'un ni l'autre et écrire vos fichiers CSS simples.

    Contre Bootstrap

    Rien n'est sans prix, hein? Eh bien, Bootstrap ne fait pas exception. Au fil du temps, Bootstrap a été soumis à de vifs critiques de la part des concepteurs et des experts de l'interface utilisateur. Voici pourquoi:

    • Monotonie UX: Le fait même que Bootstrap ait une si grande collection de résultats intégrés dans des sites Web qui semblent trop familiers et, honnêtement, ennuyeux. Il vous suffit de vous rendre au exemples officiels pour voir à quel point les valeurs par défaut sont horribles. Il suffit de rechercher «tous les sites Web bootstrap se ressemblent» et vous comprendrez ce que je veux dire. 🙂
    • Malheurs de style: Bootstrap est ce que l'on pourrait considérer comme un cadre d'opinion. En d'autres termes, il a des idées sur les mises en page et vous oblige à travailler très dur si vous voulez qu'il ait un aspect / un comportement différent. Considérez les points d'arrêt CSS par défaut pour les largeurs d'écran: un écran de taille moyenne pour Bootstrap est celui qui commence à une largeur de périphérique de 768 pixels. Et si vous voulez cibler, disons, la limite de 600 pixels? Eh bien, bonne chance avec ça! C'est la même chose avec presque tous les autres composants dans bootstrap: les lignes et les conteneurs ont leur remplissage par défaut, les boutons ont des couleurs et des bordures qui sont très difficiles à remplacer sans beaucoup de travail, et ainsi de suite.

    Vouloir maître CSS? Regarde ça Cours en ligne Udemy.

    Foundation

    Si les technologies étaient des religions, les gars de la Fondation et de Bootstrap seraient l'un pour l'autre. Aucune discussion sur les frameworks CSS modernes n'est complète sans mentionner Foundation, alors c'est parti.

    Rendez-vous à la Fondation site, et vous ne pouvez pas vous empêcher de remarquer la signature: «Le framework frontal réactif le plus avancé au monde.» À première vue, cela ressemble à une grande revendication d'aller avec une campagne de marketing.

    Cependant, les adhérents du cadre de la Fondation savent qu'il y a au moins une part de vérité à cela. Foundation a été développé pour aller naturellement avec le cadre Rails, et plusieurs des principes directeurs «zen» de Rails peuvent être vus à l'œuvre.

    Par exemple, si vous vouliez une ligne contenant deux éléments sur de petits écrans, trois sur des écrans moyens et quatre sur des grands écrans, le code équivalent de Foundation ressemblera à ceci:

     
      
      
      
      
      
      
    

    Par rapport aux versions antérieures de Bootstrap, je trouve cela très intuitif et facile à mémoriser. Plus de douze grilles de colonnes et de savoir ce que 4/12 est censé être!

    Bien que Foundation soit beaucoup moins populaire que Bootstrap, c'est un secret commercial pour de nombreux développeurs front-end experts.

    Avantages du cadre de base

    Foundation présente des caractéristiques inhabituelles parmi tous les frameworks CSS que nous allons examiner dans cet article:

    • Outillage complet: Il est techniquement faux de dire que Foundation est un framework CSS. Je veux dire, c'est vrai, mais il a été construit comme une grande collection modulaire de outils qui vise à résoudre presque tous les types de problèmes frontaux. Il existe des offres de cadre distinctes pour les sites Web et les e-mails, fortement optimisées pour leurs domaines respectifs. Foundation est également livré avec une interface de ligne de commande (CLI), qui sonnera comme de la musique aux oreilles des développeurs habitués à travailler avec Webpack ou d'autres bundleurs de modules.
    • Flexibilité extrême: Contrairement à Bootstrap, Foundation a été conçu pour donner au développeur frontal un contrôle total sur ses interfaces utilisateur. En conséquence, Foundation se sentira fade et extrêmement complexe pour le nouveau venu. Cependant, la raison en est que Foundation ne vous impose aucun langage de style, mais vise à être exactement ce qu'il est: un excellent framework CSS.
    • Plus que de simples composants d'interface utilisateur: Bien que Foundation dispose de la collection habituelle d'éléments d'interface utilisateur, cela va bien au-delà de l'appel du devoir. Les développeurs ont inclus un système d'image réactif avancé, un composant de tableau de prix (oui, celui utilisé pour afficher divers plans de tarification), une validation de formulaire, un support de droite à gauche, des intégrations réactives, etc. Je tiens à souligner à nouveau que c'est une exagération pour la plupart des sites Web simples, mais pour les grands, c'est une aubaine que les développeurs expérimentés reconnaîtront.
    • Formation et conseil: Maintenant, alors que Bootstrap est créé par Twitter, c'est un projet parallèle et une très petite partie de l'image globale. La société derrière Foundation (ZURB), cependant, s'engage à l'utiliser, à la développer et à la promouvoir. Des cours de formation et des conseils professionnels sont proposés aux gros clients, ce qui est idéal pour les entreprises qui ciblent des projets de grande envergure et sont prêtes à payer.

    Contre du cadre de base

    Les points forts d'un cadre deviennent ses faiblesses lorsqu'on les considère d'un point de vue opposé. Voici pourquoi la Fondation n'est peut-être pas le meilleur choix pour votre projet:

    • Petite (plus) communauté: La communauté de la Fondation est beaucoup plus petite que celle de Bootstrap, et si vous essayez quelque chose d'exotique et que vous restez bloqué, les chances de trouver de l'aide appropriée sont plus faibles. Cependant, j'ajouterais cela à toutes fins pratiques; il y a assez de communauté là-bas. C'est juste qu'il est de plusieurs ordres de grandeur plus petit que celui de Bootstrap, vous pourriez donc ne pas trouver de solutions instantanément.
    • Complexité: Si vous êtes habitué à Bootstrap ou à quelque chose de simple, ou pire, au CSS vanille, Foundation se sentira comme une explosion infinie de complexité. Couches dans les couches, composants avec composants, options de personnalisation infinies. . . Bientôt, vous commencerez à remettre en question l'utilité de la vie elle-même! Mais là encore, la Fondation a un objectif très différent et ne peut être blâmée pour cela.
    • Trop d'options: Parfois, vous voulez juste faire de la merde et vous soucier de la perfection plus tard. Pendant de telles périodes, il est frustrant de se voir présenter trop d'options avec des variations mineures. Par exemple, pensez à devoir commander un sandwich Subway lorsque vous avez tellement faim que vous pourriez manger de la boue. Naturellement, la Fondation n'est pas pour des moments comme ça.
    • Disponibilité des talents: Puisque Foundation est (beaucoup) moins populaire que Bootstrap, le talent disponible l'est beaucoup moins. En règle générale, tout nouvel employé connaîtra probablement Bootstrap mais n'aura pas la moindre idée de Foundation. L'apprentissage prend du temps et c'est un luxe que toutes les équipes ne peuvent pas avoir.

    Bulma

    Bulma est un entrant relativement nouveau sur le champ de bataille des frameworks CSS et s'est fait un nom en peu de temps. Son attrait réside dans une approche stricte et uniquement CSS (il n'y a pas de composants JavaScript) et des valeurs par défaut élégantes, ce que de nombreux développeurs ayant un bon œil pour le design ont un problème lorsqu'ils travaillent avec Bootstrap.

    Une grande partie de l'élan de Bulma provient de taux d'adoption élevés avec la communauté Laravel (un framework Web PHP, au cas où vous ne le sauriez pas), ce qui, j'en suis sûr, a aidé Vue.js à atteindre les sommets de la popularité. parmi Frameworks JavaScript.

    Pourquoi choisir le Bulma CSS Framework

    Il y a de nombreuses raisons d'aimer Bulma et de l'utiliser pour votre prochain projet:

    • Assez populaire: D'accord, ce n'est pas plus populaire que Bootstrap, mais c'est plus populaire que Foundation. Au moment d'écrire ces lignes, Bulma a plus de 30k étoiles sur Github, environ 3k + de plus que Foundations. Bien sûr, un certain nombre d'étoiles Github n'est pas une mesure du mérite, mais cela indique que la communauté approuve Bulma.
    • Classes extrêmement lisibles: Bulma, pour moi, a les classes CSS les plus lisibles de tous les frameworks que j'ai essayés. Il existe également un système ridiculement puissant et simple pour créer des grilles de style Metro, appelées tuiles (regardez simplement le code dans la seconde moitié de la capture d'écran et dites-moi que vous n'êtes pas impressionné!).

    • Courbe d'apprentissage plate: Bulma est hautement modulaire et a été créé pour résoudre les problèmes pratiques et quotidiens rencontrés par les petites équipes et les développeurs individuels. Vous constaterez que Bulma est très facile à apprendre, même si je pense qu'une bonne expérience en CSS est toujours bonne pour avoir une idée de ce qui pourrait se passer sous le capot. Cela vous aidera lorsque vous voudrez remplacer le comportement par défaut.
    • Élégant: Eh bien, jetez un œil à la section Hero par défaut pour Bulma ci-dessous. Assez dit!

    Bulma a une petite communauté, mais extrêmement passionnée, donc si vous voulez vous débarrasser de toutes les peluches tout en voulant créer des interfaces utilisateur élégantes en un temps record, Bulma est la voie à suivre. Pour les développeurs Bootstrap, Bulma a une section séparée pour les convaincre et les aider à migrer.

    UIkit

    La chose qui vient à l'esprit en pensant à UIkit est le minimalisme. Minimalisme non pas dans les fonctionnalités (en fait, il offre peut-être le plus de fonctionnalités de tous les frameworks), mais dans la conception. Si vous aimez les designs super propres, élégants et non-timides, UIkit est là pour vous.

    Par exemple, jetez un œil au composant de barre de progression:

     

    Ou le composant de marqueur d'image (un marqueur interactif basé sur JS pour les images):

    Ou même l'humble formulaire HTML:

    Si cela ne crie pas l'élégance à pleins poumons, je ne sais pas ce que ça fait. Rendez-vous simplement sur le site Web d'UIkit et découvrez tous les composants incroyables qu'il propose. À moins que votre chef de projet ou votre client ne vous impose un langage de style particulier, je pense qu'Uikit prend la couronne de la conception d'interface utilisateur et a plusieurs kilomètres d'avance sur la conception matérielle de Google.

    Mais y a-t-il un problème, vous vous demandez. Oui il y a. Comme Bootstrap, UIkit fonctionne avec son JavaScript et bien que vous puissiez utiliser jQuery pour la manipulation DOM, en utilisant un framework DOM virtuel comme Réagir est impossible.

    De plus, Uikit est un système autonome, et vous ne pourrez pas le modifier ou l'étendre sans un effort considérable.

    Semantic UI

    Un autre concurrent dans la course est UI sémantique, qui essaie de se distinguer avec beaucoup de thèmes et de personnalisation. Il existe plus de 3000 variables de thème, ce qui se traduit par une largeur énorme. Ou c'est ce que disent les documents.

    Bootstrap 4 couvre tout cela et est également entièrement personnalisable, mais l'un des avantages de l'interface utilisateur sémantique est qu'il en résulte par défaut de jolies mises en page. Pourtant, ce n'est pas le plus beau hors de la boîte, c'est pourquoi je l'ai mis plus tard sur ma liste.

    Il possède également l'une des courbes d'apprentissage les plus raides et les conventions de codage sont beaucoup plus strictes. Essayez-le; Je dirais, et voir si cela ressemble à quelque chose que vous pourriez préférer.

    Susy

    Susy est un cadre peu connu à ce stade, mais c'est une idée fascinante et rafraîchissante. Un autre cadre de mise en page pure, Susy supprime toutes les idées prédéfinies de float, de grille, de Flexbox, de tableaux ou de toute autre chose, et vous permet composer le type de mise en page que vous souhaitez. «Compose» est le mot-clé ici, car Susy est destiné à créer des mises en page hautement modulaires et stupéfiantes avec des besoins ultra-complexes, inhabituels et précis.

    Entre les mains du développeur expert, Susy est comme un lance-flammes qui souffle tout le reste. Les petits mortels, bien sûr, réussiront à se brûler les mains.

    Pour avoir une idée de la puissance de Susy, échantillonnez ce paramètre par défaut (SASS):

     // 4 colonnes symétriques et fluides // les gouttières font 1/4 de la taille d'une colonne // les éléments couvrent 1 gouttière de moins que les colonnes // les conteneurs couvrent également 1 gouttière de moins $ susy: ('columns': susy-repeat (4 ), 'gouttières': 0.25, 'étalé': 'étroit', 'conteneur-étalé': 'étroit',);

    Je pense que le code est assez explicite, même si ce n'est pas pour ceux qui sont pressés. 🙂 Susy est parfaitement logique si vous êtes fatigué de tout le gonflement que les cadres modernes vous imposent et que vous avez des besoins de mise en page que vous savez qu'aucun cadre ordinaire ne peut servir.

    Materialize

    Si vous êtes amoureux du Material Design de Google, Materialise est un cadre vous apprécierez. La meilleure chose à faire est qu'il ne dispose que d'une poignée de composants et de cours à apprendre et qu'il vise à vous rendre productif le plus rapidement possible. Il existe peu d'options de personnalisation et Materialise suit le format de grille à 12 colonnes populaire établi par Bootstrap.

    Si vous me demandez, cependant, un Conception matérielle devient si commun, et il en est ainsi. . . Par défaut, nous nous en plaindrons bientôt, comme nous le faisons à propos du problème de tous les sites Web de Bootstrap. Pourtant, c'est un bon cadre pour commencer.

    Pure

    Yahoo est-il mort?

    Non, cette question n'est pas une diversion, mais met en évidence une observation importante: Yahoo a construit le Cadre pur et l'a publié sous la licence BSD.

    Un coup d'œil m'impressionne et je me demande pourquoi cette offre n'est pas connue de plus de gens. Quoi qu'il en soit, ce qui rend Pure, eh bien, pure, c'est que c'est un pur Cadre CSS. 🙂 En fait, les développeurs ont fait un effort supplémentaire et l'ont divisé en différents modules CSS que vous pouvez importer selon vos besoins. Donc, si vous n'avez besoin que du système de grille, il n'est pas nécessaire d'importer le CSS entier et de l'ajouter au temps de chargement du site.

    La grille Pure est disponible en plusieurs versions: 5 points, 2 points, 24 points, etc., donc quand il s'agit de créer des colonnes, vous avez beaucoup plus de flexibilité. Pure n'est pas le plus beau framework CSS par défaut, mais je peux voir comment il ajoute de la valeur à ceux qui veulent résoudre un petit problème CSS dans leur interface utilisateur et grincer des dents aux valeurs par défaut «utiles» fournies par d'autres frameworks.

    Skeleton

    Comme vous pouvez le voir sur la capture d'écran, squelette est si minime qu'il ne s'appelle même pas un framework CSS, une bibliothèque ou même un module. Ses passe-partout, et ne contient que 400 lignes de code source! Incroyable? Je pense que oui, mais pour mettre les choses en perspective, Skeleton a été conçu pour des projets minuscules ou petits qui n'ont besoin que de mises en page et de positionnement.

    Vaut le détour; après tout, qui sait, Skeleton est peut-être ce que vous cherchiez depuis le début!

    Milligram

    Milligramme, un framework CSS conçu pour la vitesse et la productivité. Les développeurs l'ont gardé en dessous de 2 Ko, ce qui, selon les normes actuelles, signifie beaucoup.

    Un milligramme est une petite interprétation amusante des frameworks CSS avec lesquels vous apprécierez de travailler. L'extension est facile, et avec quelques lignes de CSS personnalisé, vous pouvez modifier son apparence comme vous le souhaitez.

    Tailwind CSS

    Je me souviens des premiers jours où Tailwind CSS a été publié. Cela a à peine fait un léger bruit sourd, et l'écosystème n'y a prêté aucune attention; et à juste titre, étant donné que Tailwind n'était ni soutenu par un géant de la technologie ni poussé par un budget marketing massif. De plus, avec Tailwind, vous n'a pas obtenez une expérience semblable à Bootstrap, quelque chose qui était (ou est peut-être encore) devenu la norme.

    Effectivement, Tailwind a préconisé un style d'écriture et d'utilisation de CSS qui a fait hurler de dégoût beaucoup. Je veux dire, regardez l'utilisation des classes CSS dans le morceau de code suivant (tiré du site Tailwind):

    <figure class="md:flex bg-gray-100 rounded-xl p-8 md:p-0">
      <img class="w-32 h-32 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
      <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
        <blockquote>
          <p class="text-lg font-semibold">
            “Tailwind CSS is the only framework that I've seen scale
            on large teams. It’s easy to customize, adapts to any design,
            and the build size is tiny.”
          </p>
        </blockquote>
        <figcaption class="font-medium">
          <div class="text-cyan-600">
            Sarah Dayan
          </div>
          <div class="text-gray-500">
            Staff Engineer, Algolia
          </div>
        </figcaption>
      </div>
    </figure>

    Maintenant, si vous êtes développeur depuis plus de deux ans, vous ressentirez probablement des nausées. Alors . . . beaucoup . . . Des classes . . . ! Et bien qu'il n'y ait pas de CSS en ligne ici, c'est comme ça étant donné à quel point les noms de classe sont explicites (et moche?).

    Donc, pendant un certain temps, Adam Wathan (le créateur de Tailwind) courait d'un pilier à l'autre (c'est-à-dire dans les podcasts, les conférences, les articles de blog, les tweets) pour expliquer pourquoi il pensait que le CSS basé sur l'utilité était supérieur au CSS sémantique.

    Personne n'a écouté.

    (Pour ceux qui ont du mal avec la terminologie, voici une explication rapide: un nom basé sur l'utilitaire révélerait immédiatement sa «capacité» CSS; par exemple, «vw-100» serait correctement lu par la plupart comme «largeur de la fenêtre - 100%» même sans aucune information supplémentaire. Le CSS sémantique, quant à lui, préconise l'utilisation de noms de classe qui ont un sens d'un point de vue métier / contexte; les exemples sont: «reviews-list», «review-image», etc. Ce dernier exemple provient probablement d'un site d'agrégation où les clients peuvent publier des avis, mais il est impossible de savoir ce que font réellement ces classes à moins de consulter le code source.)

    Donc, comme je le disais, Tailwind a eu peu ou pas d'impact. Mais ici et là, un par un, les développeurs ont commencé à aimer et à adopter l'approche. Je me trompe peut-être, mais je dirais que quelque part en 2019, Tailwind a explosé en popularité. Il a apporté au développement Web une approche non conventionnelle et une attention particulière à certains outils astucieux tels que PurgeCSS.

    Aujourd'hui, le CSS basé sur les utilitaires a fait une brèche considérable. Regardez ce code Bootstrap 5 et voyez comment les classes d'utilitaires sont devenues courantes:

    <div class="d-grid gap-3">
      <div class="p-2 bg-light border">Grid item 1</div>
      <div class="p-2 bg-light border">Grid item 2</div>
      <div class="p-2 bg-light border">Grid item 3</div>
    </div>

    Après avoir parlé de la «vue d'ensemble» de Tailwind, passons aux avantages concrets qu'il offre:

    • Plus de productivité: Maintenant, la productivité est quelque chose dont nous pouvons discuter toute la journée et ne jamais atteindre nulle part; Cela dit, les développeurs qui ont adopté Tailwind exclusivement (en particulier pour les grands projets) se disent beaucoup plus productifs. Mais vous devrez investir des efforts soutenus dès le départ car Tailwind ne fonctionnera pour vous que lorsque vous aurez désappris les «meilleures pratiques» du passé.
    • Taille de paquet plus petite: Tailwind est plus ou moins JS manipulant CSS, donc certaines choses élégantes sont possibles. Par exemple, lorsque vous générez le projet, le compilateur peut supprimer tout le CSS inutile. C'est tout un contraste avec un projet Web typique utilisant le module CSS Bootstrap; dans ce cas, tout le CSS Bootstrap est emballé dans la dernière chose.
    • Configurable et personnalisable: Tailwind n'est pas seulement extrêmement modulaire mais est conçu pour mettre en évidence sa facilité de configuration et de personnalisation. Il n'y a rien de tel que «commencer avec Tailwind en 2 minutes» parce que vous devez apprendre le quoi, le où, le pourquoi, et plus encore; un autre exemple: si vous n'avez pas votre système de conception prêt et que vous n'aimez pas les valeurs par défaut, vous ressentirez de la frustration. Toi avez pour parcourir la courbe initiale d'apprentissage / d'ajustement avant de pouvoir dire «wow!».
    • Pas de dénomination ni de changement de contexte: L'une des plus grandes tâches des développeurs est de nommer les choses. Si le résultat final est appelé totalAmountForUnits or expensesAcrossUnits, par exemple. Le problème est encore plus sérieux en CSS car il peut y avoir des centaines (voire des milliers) de classes dans un projet. Un autre problème est le changement de contexte: sauter constamment entre votre HTML et CSS pour voir le changement CSS. Avec Tailwind, les décisions de dénomination sont déjà prises pour vous, et comme vous ajoutez / supprimez toujours des classes du HTML, il n'y a aucun changement de contexte.
    • Réutilisation du code: Si vous vous retrouvez à «réutiliser» certaines classes utiles en les copiant-collant à travers les projets, Tailwind a une fonctionnalité appelée Composants pour résoudre ce problème avec élégance. En savoir plus sur cette fonctionnalité ici.

    Pour beaucoup, Tailwind a été une bouffée d'air frais dont ils avaient désespérément besoin. Si vous êtes fatigué de votre bibliothèque CSS actuelle et que vous voulez essayer quelque chose de radical et de nouveau, Tailwind est ce que vous recherchez!

    Tacit

    Tacit est le projet parallèle de quelqu'un que j'ai rencontré en cherchant des choses intéressantes pour cet article. Ouais, tout simplement un projet parallèle; rien de plus que le travail d'une personne en fonction de ses goûts.

    Pourquoi est-ce que j'insiste autant?

    Parce que cela signifie généralement que le risque d'être abandonné est très élevé. Mais alors, je peux aussi penser à quelques points positifs: 1) Le projet est sur GitHub, et donc, si vous êtes un développeur et que vous souhaitez prendre en charge / développer Tacit, vous savez quoi faire. 😉 2) CSS n'est pas comme JavaScript en termes de changement ou d'évolution; le style que vous utilisez aujourd'hui sera pris en charge par les navigateurs pendant très longtemps.

    Alors, quel est exactement ce truc tacite?

    Comme le montre la capture d'écran, Tacite est pour ceux qui ne connaissent pas CSS ou qui ont un mauvais goût en design. L'idée est nouvelle: ajoutez le lien CSS à votre projet et vous obtiendrez instantanément un superbe site Web! Mais assurez-vous de tenir votre promesse: n'ajoutez jamais d'autres CSS ou ne mélangez jamais des éléments d'autres frameworks, car cela casserait gravement les choses.

    Et un site Web Tacit est-il beau?

    Si vous voulez me croire sur parole, je dirais que le style de conception choisi est «très bon». En fait, je le trouve encore plus agréable que Semantic UI, l'un des frameworks / bibliothèques CSS les plus populaires! Sans entrer dans une guerre des flammes et faire des comparaisons de captures d'écran côte à côte, je vais laisser tomber le sujet en disant que le design est subjectif. Mais vous pouvez comparer et décider par vous-même. 🤪

    Dans tous les cas, permettez-moi d'ajouter quelques captures d'écran de l'aspect et de la convivialité de Tacit.

    Tout d'abord, voici à quoi ressemblent les éléments de formulaire:

    Et voici à quoi ressemblent les tableaux dans leur forme la plus basique:

    Je terminerai en répétant l'évidence: si vous pensez que ce type de couleurs, polices, styles, etc., sont excellents par défaut, Tacite sera un soulagement bienvenu.

    Spectre

    Moderne, flexible, léger - si vous cherchez quelque chose avec ces attributs, Spectre vaut le coup d'œil.

    Laissez-moi vous expliquer mon choix d'adjectifs pour Spectre:

    • Moderne: Le système de mise en page de Spectre est basé sur Flexbox, qui est parmi les meilleures choses que le CSS moderne nous a données. Simultanément, de nombreuses fonctionnalités et outils trouvés dans les flux de travail CSS modernes ou d'autres cadres sont également inclus.
    • Flexible: Vous pouvez écrire le framework CSS le plus modulaire et le plus avancé, mais il est peu utile s'il ne l'est pas même personnalisable. J'aime la façon dont la personnalisation est mentionnée tout en haut de leurs documents; suivez le terrier du lapin, et vous trouverez explications.
    • Poids léger: Nous sommes à une époque où les préoccupations concernant les performances du Web sont en plein essor; chaque kilo-octet transféré est examiné et critiqué. En tant que tel, Spectre enveloppe tout dans un joli paquet de 10 Ko, ce qui ne devrait pas être «trop» pour nous tous. 😝

    Être léger ne signifie pas que Spectre sacrifie la fonctionnalité; il y a tout ce à quoi vous êtes habitué en tant que fan de Bootstrap: composants (accordéons, fil d'Ariane, cartes, etc.), éléments (formulaires, tableaux, boutons, etc.), mise en page (grilles, section héros, barre de navigation, etc.), utilitaires (chargeurs, fileurs, etc.), et plus encore.

    Qu'est-ce que je pense de Spectre? Je suis plus ou moins vendu, mais il y a deux choses que je veux mentionner. Premièrement, je n'aime pas trop la couleur bleue primaire par défaut, donc la changer est la première chose que je ferais dans mes projets. 😬 Deuxièmement, en 2020, je pense que la grille CSS est le meilleur outil pour les mises en page; Je trouve Flexbox un peu étrange de faire toutes les choses de mise en page, donc j'aurais aimé que Spectre ait utilisé Grid au lieu de Flexbox.

    Mais ce n'est guère un facteur décisif si je suis capable de développer rapidement et d'obtenir de bons résultats. Alors, je vais vous dire allez-y et essayez Spectre sans crainte!

    Primer

    Primer est pas un framework ou une bibliothèque CSS. Ce n'est même pas une collection de classes CSS ou une autre torsion étrange de la terminologie.

    Alors pourquoi est-il sur cette liste? Deux raisons:

    • It has un framework CSS.
    • C'est l'une des choses les plus complètes et les plus époustouflantes que vous ayez jamais vues.

    Oui, comme le montre la capture d'écran, Primer est un système de conception développé par GitHub pour leur propre usage. Finalement, ils ont réalisé que cette chose était puissante et extrêmement utile pour le frontend et le travail visuel; donc, ils l'ont rendu open source.

    J'ai eu du mal à trouver les bons mots pour décrire Primer. Leur propre équipe du système de conception l'appelle. . . Eh bien, oui, un système de conception, mais je pense que la portée est beaucoup plus large que ce que nous entendons lorsque nous disons «système de conception».

    Apprêt comprend de nombreux éléments dont l’importance n’est peut-être pas immédiatement évidente. Au moins pour les développeurs backend / full-stack. Alors regardons ce que ces choses spéciales sont pourquoi elles sont spéciales:

    • Directives d'interface: Dans une équipe composée d'une seule personne, la conception et la maintenance des interfaces utilisateur sont triviales. Mais ajoutez trois autres personnes à l'équipe - et des personnes compétentes et qui réussissent - et vous verrez comment tout commence à se dégrader. La raison en est l'absence de lignes directrices clairement définies et strictement appliquées - afin que chacun sache quoi faire dans chaque type de situation. L'apprêt est livré avec un bel ensemble de lignes directrices que vous pouvez soulever ou adapter à vos besoins.
    • Composants Figma: Même si je suis développeur, j'en connais suffisamment sur la conception pour comprendre que ne pas avoir une référence / utilisation claire des composants peut devenir incontrôlable à mesure que le projet avance. À quoi doit ressembler le bouton lorsqu'il est enfoncé en mode sombre, par exemple? Si personne n'a documenté cela et qu'il y a une pression pour livrer, vous aurez plusieurs variantes. Et donc, les gens de Primer ont fourni leur propre Figma afin que nous puissions apprendre et faire mieux.
    • Cadre CSS: Enfin, la chose qui a gagné Apprêt une place sur cette liste! 😄 Primer dispose d'un cadre CSS modulaire de style BEM qui fournit des styles distincts pour les pages produit et marketing. C'est quelque chose que GitHub a fait pour leur commodité, et vous êtes libre de ne pas y toucher ou d'accepter la philosophie globale telle qu'elle est. Même si ce n'est que le CSS qui vous intéresse, je vous recommande de jeter un œil ici.
    • Icônes (octicons): Chaque système de conception cohérent a sa propre vision des icônes. Pour Apprêt, la réponse est Octicons. Il n'y a pas trop d'icônes, apparemment. Pourtant, je mets cela plus haut dans la liste parce que les icônes font partie des fondamentaux absolus: si tout correspond, mais quelques icônes ne le font pas, le résultat est une interface utilisateur qui vous donne une conjonctivite. 😝
    • Composants React: Et bien sûr, puisque React est la bibliothèque frontend la plus populaire, les gens de GitHub ont codé les éléments CSS comme React composants électriques , qui sont maintenant disponibles pour nous tous!
    • Présentations: Cette partie de la Apprêt est tout au sujet du langage de conception à utiliser lors de la présentation au public (tel qu'utilisé par les gens de GitHub en interne). Polices, couleurs, bordures, contrastes - toutes les décisions ont déjà été prises. Vous êtes libre d'étudier leur lignes directrices et développez le vôtre.

    Le plus grand avantage de Primer vient de son adoption dans son ensemble. Cela peut ne pas être possible pour tout le monde, et certains peuvent même trouver que leur langage de conception est en conflit avec celui de GitHub. Et puis, certaines personnes trouvent une partie particulière (ou même une partie de la partie!) De Primer utile et fonctionnent avec. Peu importe où vous vous situez sur ce spectre, Primer a quelque chose à vous offrir: soit des composants de système de conception réutilisables et de haute qualité, soit des éléments de réflexion pour vos propres processus et directives!

    Alors, quel framework CSS est le meilleur?

    Admettez-le, vous avez déjà posé des questions similaires et reçu la réponse décevante suivante: aucune. 😀 Sélection d'un cadre (ou d'un outil, ou même une personne dans votre vie, d'ailleurs) dépend de nombreux facteurs. Si vous voulez mon conseil, le voici: coupez le bruit. Ce n'est pas parce que les gens deviennent fous de quelque chose de nouveau et de brillant que vous devez l'apprendre ou vous serez laissé pour compte. Essayer de nouvelles choses est génial, mais tourner en rond à la recherche de l'outil parfait est, eh bien, un gaspillage.

    Alors, lequel de ces cadres avez-vous essayé? Ou peut-être quelque chose d'étonnant que je viens de manquer? Faites-moi savoir dans les commentaires, s'il vous plaît. Amour, haine, salut au hasard, tous sont les bienvenus!