Que doisje utiliser pour mon projet? éclatant

Avez-vous déjà envisagé de savoir si CSS Grid peut 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 personnes utilisent un cadre tiers et les avantages et inconvénients de le faire.

Parmi les questions que je me pose le plus fréquemment, on peut citer une variété de questions: «Devrais-je utiliser CSS Grid ou Bootstrap?». Dans cet article, je jetterai un coup d’œil à cette question. Vous découvrirez que les raisons d'utiliser des cadres sont variées et ne sont pas simplement centrées sur l'utilisation du système de grille contenu dans ce cadre. J'espère qu'en expliquant ces raisons, je pourrai vous aider à prendre votre propre décision, en termes de solutions optimales pour les sites et les applications sur lesquels vous travaillez, ainsi que pour l'équipe avec laquelle vous travaillez.

Dans cet article quand je parle de d'un framework je décris un framework CSS tiers, tel que Bootstrap ou Foundation. Vous pourriez penser que ce sont vraiment des bibliothèques de composants, mais beaucoup de personnes (y compris leurs propres documents) les décriraient comme un framework, c'est ce que nous allons utiliser ici. Le facteur important est que ce sont des éléments développés en externe pour vous, sans référence à vos problèmes spécifiques. L'alternative à l'utilisation d'un framework tiers est d'écrire votre propre CSS, ce qui peut impliquer le développement de votre propre framework interne, l'utilisation d'un ensemble de fichiers communs comme point de départ ou la création de chaque projet comme une chose nouvelle. Toutes ces choses sont faites en référence à vos besoins spécifiques plutôt qu'à des besoins très génériques.

Pourquoi choisir un framework CSS?

La ​​question de l'utilisation de Grid ou d'un framework est imparfaite, car CSS Grid n'est pas une goutte d'eau. -en remplacement des choses qu'un framework CSS fait. Toute exploration du sujet doit prendre en compte ce que notre framework CSS Grid va remplacer. Je voulais commencer par comprendre pourquoi les gens avaient choisi d'utiliser un framework CSS. Je me suis donc tourné vers Twitter et j'ai posté ce tweet.

Une question: si vous avez choisi d'utiliser un framework CSS (Bootstrap, Foundation, etc.) pour votre projet, quelles en sont les principales raisons?

– Rachel Andrew (@rachelandrew) Le 16 octobre 2018

Il y a eu beaucoup de réponses. Comme je l’attendais, il existe bien plus de raisons d’utiliser un cadre que le simple système de grille qu’il contient.

Un framework offre à votre équipe une documentation prête à l'emploi

Si vous travaillez sur un projet avec plusieurs autres développeurs, tout système interne que vous créez aura besoin. d'inclure également la documentation pour aider les membres de votre équipe à l'utiliser efficacement. Créer une documentation utile est un travail long et qualifié, qui demande beaucoup de temps et que les grands frameworks font très bien.

La ​​documentation sur le framework revenait sans cesse, avec de nombreux développeurs expérimentés qui expliquaient et expliquaient pourquoi, c'est pourquoi ils recommandaient et utilisaient un framework CSS. J'entends parfois l’opinion que des personnes utilisent des frameworks parce qu’elles ne connaissent pas vraiment le CSS. Cependant, beaucoup de personnes qui répondent sont bien connues en tant que développeurs experts en CSS. 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.

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

Lorsque vous décidez d'utiliser un outil particulier, vous obtenez également une communauté d'utilisateurs qui demandent de l'aide. Sauf si vous avez un problème CSS très clair et pouvez produire un cas d'utilisation réduit pour le démontrer, il peut être difficile de demander de l'aide avec CSS. C'est particulièrement le cas si vous souhaitez demander comment construire un composant donné. 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 mettre en forme un composant particulier plutôt que de partir de zéro. C’est une question plus facile à poser et à laquelle il est plus facile de répondre.

Le système de grille

Malgré le fait que nous ayons CSS Grid, de nombreuses personnes ont répondu que la raison principale pour laquelle elles avaient décidé d’utiliser un cadre était: le système de grille. Bien entendu, bon nombre de ces projets ont peut-être été lancés bien avant la disponibilité de CSS Grid. Même aujourd'hui, toutefois, des problèmes de compatibilité avec les versions antérieures ou de compréhension par l'équipe de méthodes de mise en page plus récentes pourraient amener les utilisateurs à décider d'utiliser un cadre plutôt que d'adopter un CSS natif.

Vitesse d'exécution du projet

avec un design unique et des css efficaces une priorité bien inférieure à la date d'échéance

– CodingBlocks.net (@CodingBlocks) le 16 octobre 2018

En optant pour un cadre, votre projet sera généralement plus rapide, notamment si ce projet cadre très bien avec la façon dont le cadre fonctionne et ne nécessite pas beaucoup de personnalisation.

Dans le cas du développement d'un MVP pour une nouvelle idée, un cadre pourrait bien être un excellent choix. Vous aurez beaucoup de choses à passer, et serez toujours en train de tester des hypothèses en termes de besoins du projet. Le fait de pouvoir développer cette première version à l'aide d'un cadre peut vous aider à présenter le produit plus rapidement aux utilisateurs et à gagner beaucoup de temps à développer des éléments que vous décidez ensuite de ne pas utiliser.

Je m'engage avec un cadre quelconque. c'est un MVP – effort de développement minimal sur les outils et les frameworks pour optimiser le concept réel.

Je crée mon propre "framework" CSS sur tout ce qui est la restauration d'un site / d'une application à grande échelle existante.

– Ben Bodien (@bbodien) Le 16 octobre 2018

Un autre endroit où la rapidité et un ensemble de composants prédéfinis peut être très utile est le développement du système d'administration principal pour un site ou une application. Dans le cas où vous devez simplement créer quelques écrans d’administration, un framework peut vous faire gagner beaucoup de temps lors de la mise en forme des champs de formulaire et des 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.

Je ne suis pas un concepteur!

C’est la raison pour laquelle j’ai opté pour un framework CSS par le passé. Je ne suis pas un designer, et si je dois concevoir et construire quelque chose, je vais passer beaucoup de temps à essayer de prendre des décisions de conception que je ne suis absolument pas qualifié pour prendre. Ce serait bien d'avoir les fonds nécessaires pour embaucher un concepteur pour chaque projet parallèle, mais ce n'est pas le cas. Un cadre pourrait donc faire la différence entre expédier la chose et ne pas l'envoyer.

Traiter les problèmes de compatibilité des bugs et des navigateurs CSS

On a moins mentionné que ce que je pensais, c'est que les auteurs du framework auraient déjà traité les problèmes de navigateur, que ce soit en raison de bogues réels ou du manque de prise en charge de certaines fonctionnalités. Cependant, cela restait un facteur décisif dans la prise de décision pour beaucoup de gens.

Pour aider à la conception réactive

Réactivité des pages Web. J'ai eu du mal à choisir les points de coupure pour les pages Web.

– Faisal Ali (@f_a_akhtar) le 18 octobre 2018

Cela est arrivé à quelques reprises; les gens optaient pour un cadre spécifiquement parce qu'il était réactif ou que j'avais pris des décisions concernant les points de rupture à leur place. J'ai trouvé intéressant que ce soit précisément un facteur invoqué pour choisir un cadre.

Pourquoi ne pas utiliser un cadre

Parmi les raisons positives pour lesquelles les cadres ont été sélectionnés sont certains des problèmes rencontrés par les utilisateurs avec ce choix.

Code du cadre difficile à remplacer

De nombreuses personnes ont fait remarquer qu'il pourrait devenir difficile de remplacer le code utilisé dans le cadre, et que les cadres constituaient un bon choix s'ils n'avaient pas besoin de beaucoup. de passer outre. Les avantages de la convivialité et la compréhension de l’utilisation du framework par tout membre de l’équipe peuvent être perdus s’il ya un grand nombre de personnalisations en place.

Tous les sites Web finissent par avoir la même apparence

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

La difficulté à remplacer les styles de framework déjà mentionnés est en grande partie la raison pour laquelle les sites développés à l'aide d'un cadre particulier auront tendance à ressembler. Ce n’est pas seulement un problème créatif, cela peut être très étrange en tant qu’utilisateur de quelques sites Web qui ont tous opté pour le même cadre pour se sentir tous identiques. Pour ce qui est de véhiculer votre marque et d’en faire une bonne expérience utilisateur, vous risquez peut-être de perdre quelque chose en optant pour les choix génériques d’un cadre.

Héritage des problèmes CSS du monde entier

Que ce soit front-end ou back-end , tout outil ou cadre cherchant à s’imposer au grand public doit résoudre autant de problèmes que possible. À moins que l'outil ne soit étroitement associé à la résolution d'un cas d'utilisation particulier, il contiendra beaucoup de code très générique, ainsi que du code permettant de résoudre des problèmes que vous n'avez pas et que vous ne rencontrerez jamais.

Vous pourriez être chanceux. n’a 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 d’Internet Explorer ou de versions antérieures de Chrome. L'utilisation d'un framework avec beaucoup de prise en charge intégrée remontant à IE9 entraînerait beaucoup de code supplémentaire, en particulier compte tenu des améliorations apportées récemment à la présentation CSS. Cela pourrait également vous empêcher de faire preuve de créativité, car tout le cadre assume cette exigence de soutien. Les choses possibles avec CSS peuvent bien être limitées par le framework.

Par exemple, les systèmes de grille dans les frameworks populaires ne permettent pas d’étendre les rangées, car il n’existait aucun concept ou rangée dans les systèmes de disposition Disposition de la grille. CSS Grid Layout permet facilement cela. Si vous êtes lié à la grille Bootstrap et que votre concepteur propose une conception qui inclut des éléments qui couvrent des lignes, vous ne pouvez pas l'implémenter, bien que Grid puisse être pris en charge par vos navigateurs cibles.

Problèmes de performances [19659014] Les problèmes de performances inhérents à l'utilisation d'un code plutôt générique sont liés aux problèmes de performances, plutôt qu'à un problème optimisé pour les cas d'utilisation précis que vous avez. En essayant d'améliorer les performances, vous vous retrouverez face à des décisions du cadre.

Augmentation de la dette technique

Rapidité, principalement, bien que nous ayons rapidement découvert qu'il s'agissait d'une fausse économie car elle créait une dette technique substantielle. à long terme.

– Tim Cthulhuegdon (@nefarioustim) Le 16 octobre 2018

Un cadre pourrait être un excellent moyen de lancer rapidement votre entreprise, au moment de prendre cette décision. vous êtes sûr de le remplacer, existe-t-il un plan pour y parvenir?

Apprendre un cadre plutôt que d'apprendre CSS

En discutant avec des participants à la conférence et à des ateliers, j'ai découvert que beaucoup de gens utilisaient cadre pour écrire CSS. Il n’ya 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, en particulier si le cadre sur lequel vous avez basé vos compétences n'est plus en vogue.

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

Le choix ne considère pas les 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 envisageait des frameworks frontaux dans leur ensemble plutôt que seulement des frameworks CSS. Jeremy Keith a noté que zéro des réponses concernait des utilisateurs finaux . C'était également le cas des réponses à ma question.

Dans notre course à la construction rapide de notre site, notre désir de rendre les choses aussi bonnes que possible pour nous-mêmes, en tant que concepteurs et développeurs du site, oublions-nous qui font cela pour? Les décisions prises par le développeur d’infrastructure correspondent-elles aux besoins des utilisateurs du site que vous construisez?

Pouvons-nous remplacer les cadres par du “CSS vanille”?

Si vous envisagez de remplacer votre cadre ou de commencer un nouveau projet sans un, quelles sont certaines des choses que vous pourriez envisager pour faciliter ce processus?

Comprenez quelles parties du cadre dont vous avez besoin

Si vous remplacez l'utilisation d'un cadre par votre propre code CSS, Un bon point de départ serait de vérifier votre utilisation du cadre actuel. Déterminez ce que vous utilisez et pourquoi. Réfléchissez à la manière dont vous allez remplacer ces éléments dans la nouvelle conception.

Vous pouvez suivre un processus similaire pour décider de choisir un cadre ou d'écrire le vôtre. Quelles sont les parties de cette situation auxquelles vous pourriez raisonnablement vous attendre? Dans quelle mesure répond-il à vos besoins?

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

Je suis un grand partisan du travail avec les bibliothèques de motifs et vous pourrez le faire. lisez mon article ici dans 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 allez toujours devoir écrire la documentation, en tant que rédacteur de documentation, mais je sais que le plus difficile est souvent de savoir par où commencer. et comment structurer la documentation. Une bibliothèque de modèles facilite cette tâche en conservant les documents avec le CSS pour le composant lui-même. Cette approche peut également aider à éviter que les documents deviennent obsolètes car ils sont étroitement liés au composant auquel ils font référence.

Développer vos propres règles de code CSS

La cohérence de l'ensemble de l'équipe est incroyablement utile. Sans cadre, elle peut-être rien dictant cela. Avec les méthodes de mise en page les plus récentes, en particulier, un motif peut être construit de différentes manières. Si tout le monde en choisit un autre, des incohérences risquent de se glisser.

De meilleurs endroits pour demander de l'aide

Autre que l'envoi personnes 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 utilisateurs à s’éloigner des outils tiers, nous devons répondre à ce besoin de soutien amical et utile émanant 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 Prise en charge CSS pour les nouveaux membres de l'équipe. Si vous passez d'un cadre à votre propre solution, il serait sage d'examiner quelle formation pourrait être nécessaire pour aider à combler le fossé, en particulier si les utilisateurs sont habitués à utiliser l'aide fournie par l'outil tiers lorsqu'ils ont eu besoin d'aide dans le passé.

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

Je m'attache à des nœuds tels que «Quelles polices dois-je utiliser?», «Quelle doit être la taille des titres par rapport au corps du texte? , “Est-ce que je peux 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, c'est de règles pour créer un dessin pas terrible, une sorte de point de départ pour la typographie ou un ensemble de lignes directrices de base remplacerait la possibilité d'utiliser les valeurs par défaut d'un cadre dans beaucoup de cas.

À propos de l'état actuel de l'interopérabilité des navigateurs modernes

J'ai découvert que les personnes immergées dans le développement basé sur un framework depuis plusieurs années ont souvent une vue de l'interopérabilité des navigateurs obsolète depuis plusieurs années. Nous n’avons jamais été dans une meilleure situation en termes de CSS utilisant plusieurs navigateurs. Il est possible que certains navigateurs ne prennent pas en charge un nouveau brouillon de code CSS, mais en général, le code CSS (s’il est pris en charge) ne sera pas rempli 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 le fait que vous n'utilisez pas de cadre pour les membres de l'équipe qui croient que le cadre enregistre les bugs du navigateur, ce point peut être utile de soulever. Les problèmes de compatibilité des navigateurs sont-ils réels ou basés sur les préoccupations du passé?

Voyons-nous une nouvelle génération de cadres?

Ce qui m'intéresse, c’est de savoir si nos nouvelles méthodes de présentation contribueront à ouvrir la voie à une nouvelle génération d’outils et cadres. Verrons-nous des outils qui tirent parti des nouvelles méthodes de mise en page, permettent plus de créativité, mais apportent néanmoins aux équipes et aux individus certains des avantages indéniables découlant des réponses à mon tweet.

Peut-être en s’appuyant sur de nouvelles méthodes de mise en page plutôt que sur 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'affranchir de certains problèmes de performances inhérents à un code très générique.

Un domaine dans lequel un cadre pourrait aider serait de créer des solutions de repli solides pour les navigateurs qui ne prennent pas en charge les nouvelles méthodes de disposition, ou en ayant une accessibilité vraiment solide cuite dans les composants. Cela pourrait aider à orienter une méthode de travail qui prend en compte l'interopérabilité et l'accessibilité, même pour les personnes qui n'ont pas ces éléments à l'esprit.

Je ne pense pas que le simple fait de changer la grille Bootstrap pour CSS La disposition de grille réalisera ceci. Au lieu de cela, les auteurs qui proposent de nouveaux cadres devraient peut-être examiner certaines des raisons exposées ici et essayer de les résoudre de nouvelles façons, en utilisant les nouvelles fonctionnalités de CSS pour le faire.

Si vous vous Utilisez un cadre?

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’ya pas de bonne ou de mauvaise réponse universelle. Il n'y a que ce qui est bien ou mal pour votre projet. J'espère que cet article et les nombreuses réponses à ma question initiale vous donneront peut-être des éléments à débattre pendant que vous réfléchissez à cette question.

N'oubliez pas que la réponse changera avec le temps. Cela pourrait être une expérience utile de réfléchir non seulement à ce dont vous avez besoin actuellement, en termes de développement initial du site, mais également à la durée de vie du site. Vous attendez-vous à ce que cela dure encore dans cinq ans? Votre choix sera-t-il alors positif ou négatif?

Documentez vos décisions, n’hésitez pas à les revoir et assurez-vous que votre équipe et vous maintenez vos compétences en dehors du cadre que vous décidez d’utiliser. De cette façon, vous serez bien placé pour passer à l’avenir et prendre les meilleures décisions pour les prochaines phases de votre projet.

J’aimerais bien que la conversation entamée dans ce tweet se poursuive. Faites-nous savoir vos histoires dans les commentaires – elles pourraient aider d’autres personnes à tenter de déterminer ce qui convient le mieux à leurs projets actuellement.

(il)