Création de "composants" html/css

Bonjour à tous

J'ai une demande assez spéciale au travail.

Il m'a été demandé si il est possible de créer des 'composants' (des bouts de code réutilisables) que je pourrais utilisés et ré-utilisés dans n'importe quel projets (par exemple: des boutons, des menu responsive, des formulaires, des headers, tout ce qui est modulable.....). Le but est d’accélérer le développement (faire l'intégration html/css) pour produire plus de sites. Je pense que c'est en partie réalisable, dans la limite du possible, même si un 'composant' ne sera pas compatible à 100%, puisque chaque site possède une charte graphique unique.

J'ai donc besoin de l'avis des intégrateurs et dev front. Je cherche à créer une bibliothèque de composants en quelques sortes...

Est-il possible de créer des composants html/css que je peux importer pour n'importe quel projet ? Si oui, avec quelles technologies, quel langages ? SASS, Vue js ?

Merci pour votre aide

Bonjour. Je suis amateur mais je code toujours dans une perspective "framework css". Donc faire du html/css réutilisable je fais ça tout le temps.

Il y a quand même un écueil par rapport à une orientation composant (comme avec css in js) : c'est le scope, le télescopage des styles : il faut être rigoureux avec son "composant" sinon on ne pourra pas y échapper, mais il faut aussi que le style déjà présent soit bien codé pour le permettre, et là ce n'est pas toujours évident.

La philosophie de départ doit-être prise en compte elle aussi : les unités de base seront elles fixes (px, rem, ...) ou relatives (em, vw, ...) ? etc. Pour pouvoir interagir de manière optimale sans trop de code le top est de pouvoir coder en unités relatives (on peut ensuite "zoomer" pour avoir un composant plus gros par exemple, comme un bouton), mais dans le cas d'un code à reporter dans un environnement moins connu/maîtrisé il vaut peut-être mieux s'abstenir et rester en unité fixe pour ne pas exploser le "composant" dans certains cas de figure non prévu.

Je me souviens de l'époque où j'avais voulu faire un thème complet pour phpBB : les classes étaient tellement généralistes que je ne pouvais pas toucher un truc sans impacter tout le reste du site. J'avais laissé tomber. Cet exemple date un peu mais je trouve qu'il est parlant.
Modifié par Olivier C (10 Jan 2021 - 13:13)

@parsimonhi

Je pense bien que ça soit faisable. J'aurais besoin d'un exemple concret. D'un point de vue intégration, comment pourrais-je créer des composants à partir d’éléments ou fonctionnalités qui reviennent régulièrement ?

Bonjour,

Il suffit de regarder les outils existants, mais il n'y a que toi qui connait le contexte dans lequel tu évolues. Après, si ta mission est de ré-inventer la roue, voilà quelques étapes par lesquelles tu peux passer :

1) C'est quoi les outils/langages qui déjà sont utilisés dans ton entreprise (pas la peine de faire des composants truffés de php si personne n'utilise le php autour de toi par exemple). Si on utilise massivement react ou vue autour de toi, bah, faut chercher à faire des composants react ou vue. Si c'est un peu de tout, fais des trucs en html+css+js : c'est passe-partout. Il n'y a pas de "technologie" meilleure qu'une autre,
2) Se faire une liste de composants à éventuellement mettre au point (menus divers, formulaire de connexion, calendrier, upload de fichier, download de fichier, consentement pour cookies, posts d'utilisateur, carrousel/slider, chat, paiement en ligne, formulaire de recherche dans un site etc. Bref, ce n'est pas les idées qui manquent, mais ce n'est pas la peine d'en trouver 50. Si tu veux avancer sélectionne en 3 ou 4 pour commencer (attention, certains sont des usines à gaz, commence par des trucs simples),
3) Une fois quelques composants identifiés, regarder ce qui existe déjà concernant ce type de composants, ce qui est réutilisable, s'il y a des problèmes de licence ou pas,
4) et après, bah, t'en code un, puis deux, puis trois etc. en essayant d'avoir une certaine cohérence. Parce que à peu près tout existe déjà, donc, la valeur ajoutée que tu peux apporter, outre le fait que ce sera ta production donc pas de problème de licence, c'est la cohérence de l'ensemble : pouvoir par exemple mettre un calendrier et un slider que tu aurais fait avec tes petites mains sans que ce soit le bazar total dans ta page.

Après, au niveau réalisation, si c'est du javascript, il faut bien veiller à tout encapsuler dans un objet global unique qui contiendra tout ce qui est nécessaire. Et idéalement, au niveau du css, il faudrait fonctionner par thème, c'est à dire qu'une ou un ensemble de feuilles css seraient mises au point pour styler l'ensemble de tes composants, avec dans l'idée de pouvoir remplacer plus ou moins facilement ces feuilles de style pour un autre ensemble de feuilles de style donnant un look différent à tes composants.

Difficile d'être concret : t'es devant une feuille blanche pour l'instant. Mais une fois que tu auras choisi des trucs à réaliser, on pourra être plus concret.

Amicalement,
Modifié par parsimonhi (10 Jan 2021 - 12:14)

@parsimonhi

En fait, je dois accélérer la partie intégration des projets. Il faut coder plus vite, c'est le mot d'ordre. La stack actuelle est php, html, css, javascript (natif et jquery). J'ai la possibilité d'utiliser vue js (ou un autre techno), si besoin, pour créer les composants en question.

Je vais poser le problème d'un autre angle.

As-tu déjà créer un bout de code que tu as ré-utilisé dans un autre projet ou plusieurs autres projets ? Si oui, comment, quels étaient les éléments ou fonctionnalités en question ? Et comment, techniquement, tu t'y es pris ?

Bonjour,

allan00958 a écrit :
@parsimonhi
As-tu déjà créer un bout de code que tu as ré-utilisé dans un autre projet ou plusieurs autres projets ? Si oui, comment, quels étaient les éléments ou fonctionnalités en question ? Et comment, techniquement, tu t'y es pris ?

On n'arrête pas de réutiliser du code. Mais il y a une différence entre réutiliser des bouts de code et mettre à disposition du code pour les autres.

Je te donne un exemple : https://github.com/parsimonhi/animCJK/

Dans ce projet, le but est de fournir à d'autres sites un moyen d'afficher des caractères chinois ou japonais progressivement trait par trait. La technologie de base est svg + css. On fournit également des scripts javascript pour afficher ces svg de différentes manières.

Pour que ce soit vraiment réutilisable, il faut veiller à plusieurs choses :
1) l'intégration doit être aisée (au mieux une ligne, au plus quelques lignes),
2) les éventuelles feuilles de styles ne doivent pas perturber l'affichage des autres éléments de la page,
3) il faut une documentation,
4) il faut préciser la ou licences à appliquer
5) il faut qu'au moins une autre personne arrive à ré-utiliser le code

Mais pour le contenu technique, il n'y a pas de règle. Ça dépend complètement de ce que ton composant va faire.

Amicalement,

@parsimonhi

OK. Prenons un exemple.

Disons que j'ai un header qui contient un logo à gauche et un menu à droite et le contenu du header est de 1366px centré. Sur un autre site, j'ai le même header, sauf que celui si contient un lien à gauche, un logo au milieu et une nav à droite.

Vois-tu une façon de 'modulariser' ce header ? en html/css/partial php, vue js ?

Mon chef, un designer (qui ne code pas) pense que tout peut être modulariser ou presque parce que les maquettes se ressemblent beaucoup d'un site à l'autre. Pour lui c'est juste du copier/coller avec un peu de CSS par dessus pour coller au design. Et j'ai peur qu'il ne comprenne pas que techniquement, ça ne marche pas comme ça.....

Bonjour,

1) Les chefs ne comprennent rien à la technique, sinon ils seraient techniciens au lieu d'être chefs. Si on les met chefs, c'est parce qu'ils ne savent rien faire d'autre.

2) Les chefs ont toujours raison.

3) De fait tout peut être modularisé, mais plus ou ou facilement, avec plus ou moins d'options.

Maintenant, blague mise à part, pour un header, tu ne choisis pas le plus facile vu qu'il peut contenir tout et n'importe quoi. Donc pour le header, le composant contient :

<header></header>

Et tout le reste, c'est du spécifique.

Mais il y a d'autres composants qui sont plus "faciles" parce qu'ils contiennent un peu toujours la même chose, comme par exemple un slider. Dans le cas d'un slider, tu as 2 versions principales, une sans js et une avec js. C'est avec js que tu as les meilleures chances de livrer un truc "tout en un" qui s'intégrera en une ligne. Tu dois gérer une liste d'images qui sera en paramètre de ton composant. Eventuellement, tu peux avoir un deuxième paramètre qui sera le nombre d'images visibles à un instant donné. Eventuellement, tu peux prévoir des options comme la possibilité d'un défilement automatique. Ensuite, tu dois coder tes boutons pour te déplacer d'une image à une autre (ou démarrer / arrêter un défilement automatique). Et enfin, l'aspect de tout ça sera modifier par une feuille de style qui doit pouvoir être facilement remplacer par une autre feuille de style (ce qui veut dire qu'il faut documenter la manière de styler le composant). Mais évidemment, quand on se lance dans ce genre de truc, il faut regarder ce qui se fait d'habitude chez vous (c'est à dire vérifier ce qui est vendu au client en général), et aussi vérifier que vous n'avez pas déjà ça en magasin !

Amicalement,

Ce que tu décris ressemble fort a un système de template décliné quasiment en block individuels que tu peut insérer via des hooks dans un template plus généraliste , par exemple un <nav> avec une boucle pour y insérer liens et attributs, quelque condition pour y ajouter des class (.hamburger , ..) ajouter dans un éléments parent a partir d'un ou d'attributs.


Peut-être un truc du genre

<body data-level-content="class-theme[ti] class-grid class-fullHeight class-column article-loop-5">
   <header   data-tpl-level-content="body logo title nav navigation-site hamburger id-header-[hi] ] class-autre-class"><!-- ajout des composant et attribut depuis data attribute --></header>
   <main data-level-tpl-content="body section  class-scrollAuto"><!-- insere une section  et loop sur  5 articles--></main>
   <footer data-level-tpl-content="body nav pagination"></footer>
</body>

En gros , il faut aller chercher 5 articles ,inserer dans le header un logo et le menu du site ainsi que de générer la pagination dans footer, coté style, on prend tel thème(couleur, typo,...) et un layout basé sur une grid en colonne, (je ne suis pas développeur, il n'y a donc pas de logique de dev là, juste une idée avec un data-attribute a dégager après la moulinette)

Avec un systéme de nommage compréhensible pour tout le monde, pour lier la moulinette php/sql/js et styles ensemble , cela devrait contribuer a créer des structure cohérentes .

L'idée est de partir sur un vocabulaire(descriptif) et une construction du code que chacun va comprendre depuis son domaine d'expertise et retrouver/nommer rapidement les portions des composants (graphique/code) qu'il peuvent modifié / inséré, un cahier des charges commun sommes toutes .

Une fois cela établi, vous avez de quoi commencer a remplir vos pages blanches et choisir les technos les plus appropriées et selon vos habitudes de travail et compétences

La difficulté est d'impliquer tout le monde de façon positive dans la démarche et d'en faire une démarche commune, car le changement est toujours mal accueilli et d'autant plus si il y a déjà des tensions de la part de la hiérarchie.

C'est aussi un projet qui ne se fait pas dans l'urgence, étape par étape éventuellement.

Bon courage et bonne aventure.
Modifié par gcyrillus (10 Jan 2021 - 14:56)

@parsimonhi

C'est exactement ce que j'ai essayé d'expliquer mais, il y a une obsession à vouloir créer des 'composant' afin du faire du copier/coller et ajouter du css par dessus. Je suis pas sûr que la pilule va passer, sachant que chaque site a une charte graphique spécifique. Mais, encore une fois, le code pour ceux qui ne codent pas c'est juste 'du copier/coller'.

chef: C'est le même bouton qu'il y a sur le site X, c'est juste que, ici, il est rectangulaire et pas rond.

moi: Oui, mais, le CSS sera différent, donc, non, je ne peux pas créer un bouton 'composant'.

chef: il faut un composant, c'est juste un bouton. J'en design tout le temps.

moi:

Il y a effectivement beaucoup de spécifique. Je pense par contre que pour un slider, c'est très souvent le même, en desktop et responsive avec les flèches de navigations qui diffèrent. Je pense que c'est faisable, mais pour certains éléments, jusqu'à un certain niveau. Si, le chef n'est pas satisfait, pas grave. Je prépare mon CV au cas où.

Merci pour ton intervention.