Cadres CSS axés sur les composants

Points de base

• Les composants Web deviennent de plus en plus populaires, et il existe également une demande croissante de cadres CSS qui peuvent gérer ce type de développement. Les cadres CSS traditionnels tels que Bootstrap ou Foundation peuvent empêcher les développeurs d'utiliser des composants Web en raison de leurs vastes styles et code intégrés.
• Les cadres CSS axés sur les composants tels que Pattern Lab, Suit CSS, InuitCSS et Pure CSS sont conçus comme un point de départ pour la conception et fournissent un cadre pour développer des composants Web sans imposer des restrictions ou des styles inutiles. Ils permettent aux développeurs de se concentrer sur leurs propres styles et code, ce qui améliore la réutilisabilité, la cohérence et la collaboration.
• Bien que les cadres CSS axés sur les composants offrent de nombreux avantages, ils peuvent augmenter la complexité du projet et nécessiter une bonne compréhension de la grammaire et des conventions du cadre. Ils sont principalement conçus pour les technologies basées sur JavaScript, mais peuvent être appliquées à tout langage de programmation qui prend en charge la programmation modulaire.

"En 2015, tout le monde abandonnera le cadre."

Je ne suis pas sûr. Je veux juste attirer votre attention. Peu importe combien vous plaisantez, avez-vous remarqué un changement subtil dans le champ frontal, c'est-à-dire que tout le monde abandonne progressivement le cadre? Par exemple, le cadre Sass Mesh Susy a renoncé à sa dépendance à l'égard de la boussole, et les développeurs ont été encouragés à se demander si jQuery est nécessaire.

Les composants Web sont très populaires de nos jours. Alors que nous entrons dans un monde où les composants deviennent des citoyens de première classe d'applications Web, nous avons besoin d'une urgence d'un cadre qui peut gérer ce nouveau type de développement.

Limitations du bootstrap et de la fondation

Si vous êtes un développeur frontal, vous connaissez probablement bien le bootstrap ou la fondation. Des cadres CSS populaires comme celui-ci peuvent nous limiter lors du développement avec des composants Web. Non pas qu'ils soient mauvais. Ils viennent juste avec trop de styles intégrés. Compte tenu des fonctionnalités de Shadow Dom, ce n'est peut-être pas ce que vous voulez. Ces cadres sont connus pour essayer de répondre aux besoins de tous. D'un autre côté, le cadre CSS basé sur les composants sert de point de départ pour la conception et fournit un cadre pour le développement de composants Web. Ce sont tous leurs objectifs.

Bootstrap a révolutionné la façon dont nous écrivons le code frontal dans une certaine mesure. Il nous fournit d'excellents composants et structures d'interface utilisateur pour des feuilles de style extensibles et maintenables. Il est parfait pour les grandes équipes de collaborer avec un format CSS accepté. Le problème est qu'il contient beaucoup de code. C'est parfait si vous ne voulez rien construire à partir de zéro. Cependant, la personnalisation n'est pas si efficace. Pouvez-vous le personnaliser? bien sûr. Est-ce facile? C'est discutable.

"Vous travaillez sous l'entrave du cadre maintenant, pas à cause du cadre." - Harry Roberts

La fondation

résout efficacement ce problème. Il est conçu pour être personnalisé à partir de zéro. En fait, l'équipe est déterminée à rendre le thème par défaut très basique pour s'assurer que tous les sites construits avec lui semblent différents à la fin. Mais certaines composantes de la fondation sont étroitement associées à des marqueurs, ce qui limite les marqueurs que vous pouvez utiliser, il est donc plus qu'un simple cadre CSS. Ils travaillent activement pour améliorer cela.

Toolkit et trame UI

Harry Roberts a fait une présentation plus tôt cette année (voir diaporama) discutant des nuances entre la boîte à outils de l'interface utilisateur et le cadre CSS. Dans ce discours, il a dit que le cadre CSS ne vous entraverait pas. Il ne contient aucun styles. Il n'a aucune restriction sur les balises, les structures HTML ou les classes.

D'un autre côté, la boîte à outils d'interface utilisateur est un produit complet qui propose un package complet hors de la boîte: conception, structure, normes, motifs et plugins JavaScript sont tous inclus dans un package soigné. Ces outils sont utilisés pour le prototypage rapide et le démarrage rapide. La plupart du temps, si vous voulez qu'ils soient différents de la façon dont ils sont construits, vous finissez par écraser les règles et contourner la définition du cadre.

De ce point de vue, comme Addy Osmani l'a récemment discuté, une seule page dans un exemple de projet construit avec bootstrap peut avoir jusqu'à 91% de CSS inutilisé.

donc la question est: quels frameworks éviteront votre chemin et vous permettra d'écrire votre code au lieu d'écrire votre code pour vous?

1. Laborat de modèle

   Pattern Lab a été créé par Brad Frost et Dave Olsen et est basé sur la philosophie de conception atomique. Il s'agit d'une approche flexible pour concevoir le site Web à partir des bases, puis de la créer étape par étape. Ce n'est pas tant un cadre, c'est un moyen de créer des sites Web et des applications.

   Pattern Lab encourage les sites Web de conception qui se concentrent sur les composants. Commencez par des balises de base et créez des composants plus complexes étape par étape. Ce cadre n'a aucune hypothèse sur les styles. Il ne vous gênera pas et vous permet de gérer votre CSS.

   Il fournit également un guide de structure créative CSS et un ensemble d'outils qui contribuent à l'ensemble du processus créatif. Par exemple, un outil qui redimensionne au hasard l'écran pour voir comment votre conception fonctionne sur différentes tailles d'écran et un outil d'annotation pour une collaboration rapide.

   mais la meilleure partie est qu'elle est sans préprocesseur. Contrairement à de nombreuses autres solutions, il n'a pas son mot à dire sur le préprocesseur à utiliser; utilisez tout préprocesseur que vous aimez, suivez simplement les principes. Il est également livré avec des styles zéro et vous permet de créer des guides de style au lieu d'imposer un guide de style.

2. Suit CSS

   Le costume CSS de Nicolas Gallagher, par définition, est une méthode de développement d'interface utilisateur basée sur des composants. Il fournit un ensemble de lignes directrices qui permettent la mise en œuvre et la combinaison d'unités indépendantes couplées en vague.

   Les composants

   sont le cœur de ce cadre. Il est conçu pour développer des systèmes frontaux où les composants sont composables et configurables. Il fournit un guide pour construire des composants bien encapsulés et peut être modifié via l'interface.

   Suit CSS est un cadre mature construit sur une base solide. La documentation est un excellent endroit pour en savoir plus, mais aussi en savoir plus sur les principes frontaux.

   Il est également livré avec un ensemble de packages qui peuvent être ajoutés au flux de travail. Il fonctionne bien avec NPM (Node Package Manager) et comprend des capacités de préfixe automatique, des tests d'encapsulation et un préprocesseur personnalisable et évolutif. Essayez-le ou asseyez-vous et lisez certains des principes sur lesquels il est basé, ce qui peut vous donner de grandes informations même si vous décidez de ne pas l'utiliser.

3. inuitcss

   Inuit CSS n'est pas une boîte à outils d'interface utilisateur. Il n'impose aucune conception, ni des milliers de composants ou de lignes de code CSS. Il s'agit d'un cadre avec une évolutivité à l'esprit, fourni en tant que petit package que vous pouvez mettre à l'échelle au besoin.

   "InuitCSS fournit une infrastructure solide sur laquelle vous pouvez créer des sites Web ou des applications de toute taille ou style."

   Encore une fois, l'aspect le plus important des inuitcss est qu'il peut rapidement éviter votre chemin. Il est conçu pour être sans style et constitue une bonne base sur laquelle vous pouvez construire votre CSS.
   Par exemple, la pagination dans les inuitcss ne contient que des marges et un rembourrage, pas des composants entièrement conçus. Il vous permet de définir votre propre style sans personnaliser le cadre, ou pire, de le remplacer.
   inuitcss est actuellement en cours de refonte et la prochaine version du module pré-alpha est disponible.
   Un autre aspect de ce que j'aime à propos des inuitcss est qu'il vous permet de composer facilement les composants de l'espace de noms. Il est facile de mettre le cadre dans un projet existant et de commencer à refactoriser votre code existant.
   Il s'agit d'une énorme victoire pour tout cadre existant. En revanche, lors de l'ouverture de Bootstrap ou Foundation, la première ligne de code la plus probable affectera tout (je vous regarde, la taille d'une boîte!). Ces cadres ne fonctionneront pas avec les styles existants, ou il peut être difficile de mettre l'un d'eux dans un projet et de s'attendre à ce que tout reste le même. InuitCSS fait de même, mais il est facultatif et facile à désactiver.

4. CSS pur

   À mon avis, Pure CSS est quelque part entre les kits d'outils et les cadres d'interface utilisateur. Il fournit un ensemble de styles de base, mais vous permet de prendre le relais de là. Par conception, il est conçu pour vous orienter et vous permet de créer des CSS sans écraser les règles existantes.

   "Pure a des styles minimaux et vous encourage à rédiger des styles d'application en plus. Il est conçu pour éviter votre chemin et faciliter les styles primordiaux."

Conclusion

Les composants Web révolutionnent le champ frontal. Notre outil préféré actuel n'est peut-être pas le meilleur lors de l'utilisation de ces fonctionnalités plus récentes. Il est peut-être temps d'aller au-delà de votre cadre préféré et d'essayer quelque chose de nouveau. J'espère que ce message vous a donné suffisamment d'options à considérer.

Il est nécessaire d'avoir une clarté suffisante pour choisir le bon outil pour tout problème donné. Choisissez judicieusement. Comme toujours, n'évitez pas de le faire vous-même.

FAQS (FAQ) sur les cadres CSS basés sur les composants

Quels sont les principaux avantages de l'utilisation des cadres CSS axés sur les composants?

Le cadre CSS axé sur les composants offre de nombreux avantages. Premièrement, ils améliorent la réutilisabilité. Les composants peuvent être réutilisés dans différentes parties du projet, réduisant la quantité de code écrite et rendant la base de code plus gérable. Deuxièmement, ils améliorent la cohérence. En utilisant les mêmes composants tout au long du projet, l'interface utilisateur reste cohérente, offrant ainsi une meilleure expérience utilisateur. Troisièmement, ils facilitent la collaboration. Différents membres de l'équipe peuvent gérer différents composants simultanément, accélérant le processus de développement. Enfin, ils facilitent l'entretien. Étant donné que les composants sont indépendants, les modifications d'un composant n'affectent pas les autres, ce qui rend les corrections de bogues et les mises à jour moins compliquées.

En quoi le développement axé sur les composants est-il différent des méthodes de développement traditionnelles?

Les méthodes de développement traditionnelles utilisent généralement une approche descendante, où la conception globale est décomposée en parties plus petites. En revanche, le développement axé sur les composants adopte une approche ascendante où les composants individuels sont développés indépendamment puis combinés en une conception complète. Cette approche permet une plus grande flexibilité et évolutivité car les composants peuvent être ajoutés, supprimés ou modifiés sans affecter l'ensemble du système.

Le cadre CSS basé sur les composants peut-il être utilisé avec n'importe quel langage de programmation?

Le cadre CSS basé sur les composants est principalement conçu pour les technologies basées sur JavaScript telles que React, Vue et Angular. Cependant, les principes du développement basé sur les composants peuvent être appliqués à tout langage de programmation qui prend en charge la programmation modulaire. Il convient de noter que des détails de mise en œuvre spécifiques peuvent varier en fonction de la langue et du cadre utilisé.

Quels sont les frameworks CSS axés sur les composants populaires?

Certains cadres CSS populaires axés sur les composants incluent Bootstrap, Foundation, Bulma et Semantic UI. Ces cadres fournissent des composants pré-conçus qui peuvent être personnalisés aux besoins spécifiques du projet. Ils fournissent également beaucoup de documentation et de soutien communautaire, ce qui les rend idéaux pour les débutants et les développeurs expérimentés.

Comment démarrer le développement axé sur les composants?

Pour démarrer le développement axé sur les composants, vous devez d'abord comprendre les principes de base de la programmation modulaire et de l'architecture basée sur les composants. Ensuite, sélectionnez un cadre CSS basé sur les composants qui répond aux besoins du projet. Familiez-vous avec la documentation du cadre et commencez à essayer de créer et d'utiliser des composants. Les tutoriels et les cours en ligne peuvent également vous aider à apprendre ces connaissances.

Y a-t-il des inconvénients à utiliser des cadres CSS pilotés par des composants?

Bien que les cadres CSS axés sur les composants offrent de nombreux avantages, ils présentent également des inconvénients potentiels. Par exemple, ils peuvent augmenter la complexité du projet, en particulier pour les débutants. Ils nécessitent également une bonne compréhension de la grammaire et des conventions du cadre. De plus, une dépendance excessive à l'égard des composants pré-conçus peut limiter la créativité et conduire à la conception.

Comment le développement axé sur les composants améliore-t-il la collaboration d'équipe?

Le développement axé sur les composants améliore la collaboration de l'équipe en permettant aux membres de l'équipe différents de gérer les différents composants simultanément. Ce processus de développement parallèle peut accélérer considérablement le calendrier de développement. En outre, comme les composants sont indépendants, les modifications apportées par un développeur n'affectent pas le travail d'autres développeurs, ce qui réduit le risque de conflits et d'erreurs.

Le cadre CSS basé sur les composants peut-il être utilisé pour le développement d'applications mobiles?

Oui, le cadre CSS basé sur les composants peut être utilisé pour le développement d'applications mobiles. De nombreux cadres, tels que React Native et Ionic, fournissent des composants conçus spécifiquement pour les interfaces mobiles. Ces composants peuvent être utilisés pour créer des conceptions réactives qui peuvent bien fonctionner sur une variété de tailles d'écran et d'appareils.

Comment le développement axé sur les composants prend-il en charge les tests et le débogage?

Le développement axé sur les composants prend en charge les tests et le débogage en permettant des tests et un débogage indépendants de chaque composant. Cette approche modulaire facilite l'isolat et la correction de bogues et d'écrire des tests unitaires pour les composants individuels. Il facilite également les tests de régression, car les modifications d'un composant n'affectent pas les autres.

Comment assurer l'accessibilité des composants?

Assurer que l'accessibilité des composants comprend les meilleures pratiques suivantes pour la conception Web accessible. Cela comprend la structuration à l'aide de HTML sémantique, de fournir un texte alternatif aux images, d'assurer un contraste des couleurs suffisant et de rendre toutes les fonctionnalités accessibles via le clavier. De nombreux cadres CSS axés sur les composants offrent des capacités d'accessibilité hors de la boîte, mais nécessitent toujours de tester vos composants en utilisant une variété de technologies d'assistance pour s'assurer qu'elles sont effectivement accessibles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!