CSS Frameworks ou CSS Grid : que dois-je utiliser pour mon projet ?

Publié: 2022-03-10
Résumé rapide ↬ Vous êtes-vous déjà demandé si CSS Grid pouvait réellement remplacer le besoin de frameworks CSS ou de bibliothèques de composants tiers ? Ce faisant, Rachel Andrew a découvert une série de raisons pour lesquelles les gens utilisent un framework tiers et les aspects positifs et négatifs de cette utilisation.

Parmi les questions que l'on me pose le plus fréquemment, il y a une variété de la question, "Devrais-je utiliser CSS Grid ou Bootstrap?" Dans cet article, je vais jeter un oeil à cette question. Vous découvrirez que les raisons d'utiliser les frameworks sont variées et ne sont pas simplement centrées sur l'utilisation du système de grille contenu dans ce framework. J'espère qu'en déballant ces raisons, je pourrai vous aider à prendre votre propre décision, en termes de ce qui convient le mieux aux sites et applications sur lesquels vous travaillez, ainsi qu'à l'équipe avec laquelle vous travaillez.

Dans cet article, lorsque je parle d' un framework , je décris un framework CSS tiers tel que Bootstrap ou Foundation. Vous pourriez dire que ce sont vraiment des bibliothèques de composants, mais beaucoup de gens (y compris leurs propres documents) les décriraient comme un framework, c'est donc ce que nous utiliserons ici. Le facteur important est qu'il s'agit de quelque chose de développé à l'extérieur de vous, sans référence à vos problèmes spécifiques. L'alternative à l'utilisation d'un framework tiers est d'écrire votre propre CSS - cela peut impliquer de développer votre propre framework interne, d'utiliser un tas de fichiers communs comme point de départ ou de créer chaque projet comme une nouvelle chose. Toutes ces choses sont faites en référence à vos propres besoins spécifiques plutôt qu'à des besoins très génériques.

Pourquoi choisir un framework CSS ?

La question de savoir s'il faut utiliser Grid ou un framework est imparfaite, car CSS Grid ne remplace pas les choses qu'un framework CSS fait. Toute exploration du sujet doit considérer ce que notre framework CSS Grid va remplacer. Je voulais commencer par découvrir pourquoi les gens avaient choisi d'utiliser un framework CSS. Alors je me suis tourné vers Twitter et j'ai posté ce tweet.

Il y a eu beaucoup de réponses. Comme je m'y attendais, il y a bien plus de raisons d'utiliser un framework que simplement le système de grille qu'il contient.

Plus après saut! Continuez à lire ci-dessous ↓

Un cadre donne à votre équipe une documentation prête à l'emploi

Si vous travaillez sur un projet avec un certain nombre d'autres développeurs, tout système interne que vous créez devra également inclure une documentation pour aider les membres de votre équipe à l'utiliser efficacement. La création d'une documentation utile est un travail long et qualifié en soi, et quelque chose que les grands frameworks font très bien.

Capture d'écran de la page d'accueil de la documentation Bootstrap
La documentation d'amorçage. ( Grand aperçu )

La documentation du framework est revenue à maintes reprises, avec de nombreux développeurs frontaux expérimentés intervenant et expliquant pourquoi ils recommanderaient et utiliseraient un framework CSS. J'entends parfois l'opinion que les gens utilisent des frameworks parce qu'ils ne connaissent pas vraiment CSS, cependant, beaucoup de personnes qui répondent sont bien connues de moi en tant que développeurs CSS experts. Je suis sûr qu'ils sont parfois frustrés par les choix faits par le cadre, cependant, les aspects positifs de ce choix l'emportent sur cela.

Communautés en ligne : accès facile à l'aide

Lorsque vous décidez d'utiliser un outil particulier, vous gagnez également une communauté d'utilisateurs pour demander de l'aide. À moins que vous n'ayez un problème CSS très clair et que vous puissiez produire un cas d'utilisation réduit pour le démontrer, demander de l'aide avec CSS peut être difficile. C'est particulièrement le cas si vous voulez demander comment aborder la construction d'un certain composant. L'utilisation d'un cadre peut vous donner un point de départ pour votre question ; en général, vous demanderez comment modifier ou styliser un composant particulier plutôt que de partir de zéro. C'est une chose plus facile à demander, ainsi qu'une chose plus facile à répondre.

Le système de grille

Malgré le fait que nous ayons CSS Grid, de nombreuses personnes ont répondu que la principale raison pour laquelle elles avaient décidé d'utiliser un framework était le système de grille. Bien sûr, bon nombre de ces projets ont peut-être été lancés bien avant que CSS Grid ne soit disponible. Même aujourd'hui, cependant, les préoccupations concernant la rétrocompatibilité ou la compréhension de l'équipe des nouvelles méthodes de mise en page peuvent amener les gens à décider d'utiliser un framework plutôt que d'adopter le CSS natif.

Rapidité de livraison du projet

En général, opter pour un framework accélérera la livraison de votre projet, en particulier si ce projet correspond très bien à la façon dont le framework fonctionne et ne nécessite pas beaucoup de personnalisation.

Dans le cas du développement d'un MVP pour une nouvelle idée, un framework peut être un excellent choix. Vous aurez beaucoup de choses sur lesquelles passer du temps et vous testerez encore des hypothèses en termes de besoins du projet. Être capable de développer cette première version à l'aide d'un framework peut vous aider à mettre le produit devant les utilisateurs plus rapidement et à gagner beaucoup de temps à développer des choses que vous décidez ensuite de ne pas utiliser.

Un autre endroit où la vitesse et un tas de composants prêts à l'emploi peuvent être très utiles est lors du développement du système d'administration backend pour un site ou une application. Dans le cas où vous avez simplement besoin de créer quelques écrans d'administration, un framework peut vous faire gagner beaucoup de temps en stylisant les champs de formulaire et autres composants ! Il existe même des thèmes de tableau de bord pour Bootstrap et Foundation qui peuvent constituer un point de départ utile.

Capture d'écran d'un kit de tableau de bord pour Foundation
Les collections de composants de tableau de bord accélèrent la création de l'administrateur d'une application. ( Grand aperçu )

Je ne suis pas un créateur !

Ce point est la raison pour laquelle j'ai opté pour un framework CSS dans le passé. Je ne suis pas un designer, et si je dois à la fois concevoir et construire quelque chose, je passerai beaucoup de temps à essayer de prendre des décisions de conception pour lesquelles je ne suis absolument pas qualifié. Ce serait bien d'avoir les fonds pour embaucher un designer pour chaque projet parallèle, cependant, je ne le fais pas, et donc un cadre pourrait faire la différence entre expédier la chose et non.

Traiter les bogues CSS et les problèmes de compatibilité du navigateur

Le fait que les auteurs du framework auraient déjà traité des problèmes de navigateur, que ce soit en raison de bogues réels ou d'un manque de prise en charge de certaines fonctionnalités, a été moins mentionné que je ne le pensais. Cependant, cela restait un facteur dans la prise de décision pour de nombreuses personnes.

Pour aider à la conception réactive

Cela est venu plusieurs fois; les gens optaient pour un cadre spécifiquement en raison du fait qu'il était réactif, ou que je prenais des décisions sur les points d'arrêt pour eux. J'ai pensé qu'il était intéressant que ce soit spécifiquement quelque chose appelé comme un facteur dans le choix d'utiliser un cadre.

Pourquoi ne pas utiliser un framework ?

Parmi les raisons positives pour lesquelles les cadres ont été sélectionnés, il y avait certains des problèmes que les gens ont eu avec ce choix.

Difficulté de remplacer le code-cadre

De nombreuses personnes ont commenté le fait qu'il pouvait devenir difficile de remplacer le code utilisé dans le framework, et que les frameworks étaient un bon choix s'ils n'avaient pas besoin de beaucoup de remplacement. Les avantages de la facilité d'utilisation et le fait que tous les membres de l'équipe comprennent comment utiliser le framework peuvent être perdus s'il y a alors un grand nombre de personnalisations en place.

Tous les sites Web finissent par se ressembler

Le blâme pour tous les sites Web qui commencent à se ressembler a été placé carrément à la porte des frameworks CSS bien connus. J'ai vu des sites où je suis sûr qu'un certain framework a été utilisé, puis j'ai découvert qu'il s'agissait de CSS personnalisés, si répandus sont les choix de conception effectués dans ces frameworks.

La difficulté de remplacer les styles de framework déjà mentionnés explique en grande partie pourquoi les sites développés à l'aide d'un framework particulier auront tendance à se ressembler. Ce n'est pas seulement une question de création, il peut être très étrange qu'un utilisateur de quelques sites Web qui ont tous opté pour le même cadre ait l'impression qu'ils sont tous la même chose. En termes de transmission de votre marque et d'intégration d'une bonne expérience utilisateur, vous perdez peut-être quelque chose en optant pour les choix génériques d'un framework.

Héritage des problèmes CSS du monde entier

Que ce soit en amont ou en aval, tout outil ou framework qui cherche à toucher le grand public doit résoudre autant de problèmes que possible. À moins que l'outil ne soit étroitement couplé à la résolution d'un cas d'utilisation particulier, il contiendra beaucoup de code très générique et un code qui résout des problèmes que vous n'avez pas et que vous n'aurez jamais.

Vous avez peut-être la chance de n'avoir besoin que de votre expérience complète pour être visualisée dans les navigateurs les plus récents, ce qui permet une expérience plus limitée dans Internet Explorer ou dans les anciennes versions de Chrome. L'utilisation d'un framework avec beaucoup de support intégré remontant à IE9 entraînerait beaucoup de code supplémentaire, en particulier compte tenu des améliorations récentes de la mise en page CSS. Cela pourrait également vous empêcher d'être créatif, car tout dans le cadre suppose cette exigence de support. Les choses qui sont possibles en utilisant CSS peuvent bien être limitées par le framework.

Par exemple, les systèmes de grille dans les frameworks populaires n'ont pas la capacité de s'étendre sur les lignes, car il n'y a pas de concept ou de lignes dans les systèmes de mise en page avant Grid Layout. CSS Grid Layout le permet facilement. Si vous êtes lié à la grille Bootstrap et que votre concepteur propose une conception qui inclut des éléments qui s'étendent sur des lignes, vous ne pouvez pas l'implémenter, malgré le fait que Grid puisse être pris en charge par vos navigateurs cibles.

Les problèmes de performance

Liés à ce qui précède, il y a des problèmes de performances inhérents à l'utilisation d'un code assez générique, plutôt que quelque chose d'optimisé pour les cas d'utilisation exacts que vous avez. Lorsque vous essayez d'améliorer les performances, vous vous heurtez aux décisions du framework.

Augmentation de la dette technique

Bien qu'un framework puisse être un excellent moyen de faire démarrer rapidement votre startup, et qu'au moment de prendre cette décision, vous êtes sûr de le remplacer, existe-t-il un plan pour y parvenir ?

Apprendre un framework plutôt que d'apprendre CSS

En parlant aux participants à la conférence et à l'atelier, j'ai découvert que beaucoup de gens n'ont jamais utilisé qu'un framework pour écrire du CSS. Il n'y a rien de mal à entrer dans le développement Web via l'un de ces outils, étant donné la complexité de la plate-forme Web aujourd'hui, j'imagine que ce sera la voie à suivre pour de nombreuses personnes. Cependant, cela peut devenir un choix limitant votre carrière, surtout si le cadre sur lequel vous avez basé vos compétences tombe en disgrâce.

Avoir des développeurs front-end sans connaissances CSS devrait inquiéter une entreprise. Il est extrêmement difficile de s'éloigner de ce framework si votre équipe ne comprend pas vraiment comment faire du CSS sans lui. Bien que ce ne soit pas vraiment une raison de ne pas utiliser un framework, c'est quelque chose à garder à l'esprit lorsque vous en utilisez un. Lorsque le jour viendra de partir, vous espérez que l'équipe sera prête à entreprendre quelque chose de nouveau, sans avoir besoin de se souvenir (ou d'apprendre pour la première fois) comment écrire du CSS !

Le choix ne tient pas compte des utilisateurs finaux

Nicole Sullivan a posé à peu près la même question quelques jours avant ma question alors que je pensais écrire cet article, même si elle considérait les frameworks frontaux dans leur ensemble plutôt que les frameworks CSS uniquement. Jeremy Keith a noté que précisément aucune des réponses ne concernait les utilisateurs finaux. C'était également le cas avec les réponses à ma question.

Dans notre course pour que notre site soit construit rapidement, notre désir de faire les choses aussi bien que possible pour nous-mêmes en tant que concepteurs et développeurs du site, oublions-nous pour qui nous faisons cela ? Les décisions prises par le développeur du framework correspondent-elles aux besoins des utilisateurs du site que vous construisez ?

Pouvons-nous remplacer les frameworks par du CSS "Vanilla" ?

Si vous envisagez de remplacer votre framework ou de démarrer un nouveau projet sans framework, quelles sont les choses que vous pourriez envisager pour faciliter ce processus ?

Comprendre les parties du cadre dont vous avez besoin

Si vous remplacez l'utilisation d'un framework par votre propre CSS, un bon point de départ serait d'auditer votre utilisation du framework actuel. Déterminez ce que vous utilisez et pourquoi. Réfléchissez à la manière dont vous allez remplacer ces éléments dans le nouveau design.

Vous pouvez suivre un processus similaire lorsque vous réfléchissez à l'opportunité de sélectionner un cadre ou d'écrire le vôtre. De quelles parties pourriez-vous raisonnablement vous attendre à avoir besoin ? Dans quelle mesure correspond-il à vos exigences ? Y aura-t-il beaucoup de code que vous importerez, que vous demanderez peut-être aux visiteurs de télécharger, mais que vous n'utiliserez jamais ?

Créer une bibliothèque de motifs documentés ou un guide de style

Je suis un grand fan de travailler avec des bibliothèques de modèles et vous pouvez lire mon article ici sur Smashing Magazine sur notre utilisation de Fractal. Une bibliothèque de modèles ou un guide de style permet de créer une documentation avec tous vos composants. Je commence tous mes projets en travaillant sur le CSS dans la bibliothèque de modèles.

Vous aurez toujours besoin d'écrire la documentation, en tant que personne qui écrit de la documentation, cependant, je sais que souvent la chose la plus difficile est de savoir par où commencer et comment structurer la documentation. Une bibliothèque de modèles aide à cela en conservant les documents avec le CSS pour le composant lui-même. Cette approche peut également aider à éviter que les documents ne deviennent obsolètes car ils sont étroitement liés au composant auquel ils se réfèrent.

Développez vos propres directives de code CSS

La cohérence au sein de l'équipe est incroyablement utile, et sans cadre, rien ne peut dicter cela. Avec les nouvelles méthodes de mise en page, en particulier, il existe souvent plusieurs façons de créer un modèle, si tout le monde en choisit un différent, des incohérences risquent de se glisser.

Meilleurs endroits pour demander de l'aide

A part envoyer des gens en direction de Stack Overflow, il semble qu'il y ait très peu d'endroits où demander de l'aide sur CSS. En particulier, il semble y avoir peu d'endroits accessibles aux débutants. Si nous voulons encourager les gens à s'éloigner des outils tiers, nous devons répondre à ce besoin de soutien amical et utile qui vient des communautés autour de ces outils.

Au sein d'une entreprise, il est possible que des développeurs plus expérimentés deviennent le support CSS des nouveaux membres de l'équipe. Si vous passez d'un cadre à votre propre solution, il serait sage de réfléchir à la formation qui pourrait être nécessaire pour aider à combler l'écart, en particulier si les gens sont habitués à utiliser l'aide fournie autour de l'outil tiers lorsqu'ils avaient besoin d'aide dans le passé. .

Guides de style ou points de départ pour les non-designers

Je me fais des nœuds avec des questions telles que "Quelles polices dois-je utiliser ?", "Quelle est la taille des titres par rapport au corps du texte ?", "Est-il acceptable d'utiliser une ombre portée ?" Je peux facilement écrire le CSS — si je sais ce que j'essaie de faire ! Ce dont j'ai vraiment besoin, ce sont des règles pour créer un design pas terrible, une sorte de point de départ typographique ou un ensemble de directives de base qui remplaceraient la possibilité d'utiliser les valeurs par défaut d'un framework dans de nombreux cas.

Éduquer les gens sur l'état de l'interopérabilité des navigateurs modernes

J'ai découvert que les personnes qui ont été immergées dans le développement basé sur un framework pendant un certain nombre d'années, ont souvent une vision de l'interopérabilité des navigateurs qui est dépassée depuis plusieurs années. Nous n'avons jamais été dans une meilleure situation en termes de CSS travaillant sur plusieurs navigateurs. Il se peut que certains navigateurs ne prennent pas en charge un nouveau morceau brillant de CSS, mais en général, CSS (lorsqu'il est pris en charge) ne sera pas plein de bogues étranges. Par exemple, dans presque tous les cas, si vous utilisez CSS Grid dans un navigateur, votre CSS fonctionnera exactement de la même manière dans un autre.

Si vous essayez de justifier la non-utilisation d'un framework auprès des membres de l'équipe qui pensent que le framework les protège des bogues du navigateur, ce point peut être utile à soulever. Les problèmes de compatibilité du navigateur sont-ils réels ou basés sur les préoccupations du passé ?

Verrons-nous une nouvelle génération de frameworks ?

Ce qui m'intéresse, c'est de savoir si nos nouvelles méthodes de mise en page contribueront à inaugurer une nouvelle génération d'outils et de frameworks. Verrons-nous des outils qui tirent parti des nouvelles méthodes de mise en page, permettent plus de créativité mais donnent toujours aux équipes et aux individus certains des avantages indéniables qui sont ressortis des réponses à mon tweet.

Peut-être qu'en s'appuyant sur de nouvelles méthodes de mise en page, plutôt qu'un système de grille intégré, un cadre de style nouveau pourrait être beaucoup plus léger, devenant une collection de composants utiles. Il pourrait alors être en mesure de s'éloigner de certains des problèmes de performances inhérents à un code très générique.

Un domaine dans lequel un framework pourrait aider serait d'aider à créer des solutions de repli solides pour les navigateurs qui ne prennent pas en charge les nouvelles méthodes de mise en page, ou en ayant une accessibilité vraiment solide intégrée aux composants. Cela pourrait aider à fournir des conseils sur une façon de travailler qui tient compte de l'interopérabilité et de l'accessibilité, même pour les personnes qui n'ont pas ces choses à l'esprit.

Je ne pense pas que le simple fait de changer la grille d'amorçage pour la mise en page de la grille CSS permettra d'atteindre cet objectif. Au lieu de cela, les auteurs proposant de nouveaux frameworks devraient peut-être examiner certaines des raisons décrites ici et essayer de les résoudre de nouvelles manières, en utilisant la nouvelle fonctionnalité que nous avons dans CSS pour le faire.

Devriez- vous utiliser un framework ?

Vous et votre équipe devrez répondre à cette question vous-même. Et, malgré ce que les gens pourraient essayer de vous faire croire, il n'y a pas de bonne ou de mauvaise réponse universelle. Il n'y a que ce qui est bon ou mauvais pour votre projet. J'espère que cet article et les nombreuses réponses à ma question initiale pourront vous donner des éléments de discussion pendant que vous réfléchissez à cette question.

Rappelez-vous que la réponse changera avec le temps. Ce pourrait être une expérience de réflexion utile non seulement pour considérer ce dont vous avez besoin en ce moment, en termes de développement initial du site, mais aussi pour la durée de vie du site. Pensez-vous que cela existera encore dans cinq ans ? Votre choix sera-t-il alors positif ou négatif ?

Documentez vos décisions, n'ayez pas peur de les revoir et assurez-vous que vous et votre équipe maintenez vos compétences en dehors de tout cadre que vous décidez d'utiliser. De cette façon, vous serez en bonne position pour passer à l'avenir et prendre les meilleures décisions pour les prochaines phases de votre projet.

J'aimerais que la conversation commencée dans ce tweet se poursuive. Faites-nous part de vos histoires dans les commentaires - elles pourraient bien aider d'autres personnes essayant de déterminer ce qui convient le mieux à leurs projets en ce moment.