R&D

Développement front-end Osuny

Objectifs

Les sites produits avec Osuny doivent répondre, autant que possible, aux critères énoncés dans l’article Qualité frontend : à la recherche du AAA. Les sites Osuny s’appuient sur un thème, qui encapsule les fonctionnalités et les bonnes pratiques d’accessibilité et d’éco-conception.

Le thème doit être simple à maintenir pour l’équipe cœur :

Les sites doivent être simples à développer et à maintenir pour toute la communauté :

Situation actuelle

Nous avons développé le thème en utilisant Bootstrap, afin de rendre l’adoption facile. Bootstrap crée un fichier trop lourd pour être utilisé tel quel. Nous avons donc mis en place PurgeCSS, qui permet d’examiner le code HTML, de lister les classes nécessaires et de supprimer le CSS inutile.

En développant les sites pour se rapprocher au maximum du triple A, nous avons enlevé le balisage Bootstrap. La présence de Bootstrap ne facilite pas vraiment le travail pour les développeurs tiers.

Par ailleurs, cela a rendu PurgeCSS difficile à stabiliser, ce qui crée une situation instable en production. Le code que l’on écrit est souvent supprimé en prod.

On se situe actuellement entre le double et le triple A, avec un code HTML léger, assez pur, et sémantique. Cependant, en vidant le html des classes (et dividers supplémentaires) Bootstrap, via l’usage d’extends et des mixins sass, le style s’en trouve moins lisible donc moins maintenable.

Questions

Comment faire fonctionner correctement PurgeCSS ?

Faut-il simplifier l’usage de Bootstrap au détriment de la qualité du HTML pour favoriser la maintenabilité et l’accès aux autres développeurs ?

Faut-il utiliser Bootstrap ?

PurgeCSS ?

Pour simplifier la contribution par d’autres développeurs, on s’appuie sur Bootstrap. Mais pour optimiser, on allège le poid de la feuille de style avec Purge.

Objectifs :

Problèmes rencontrés :

Pistes :

Bootstrap ?

La situation actuelle n’est satisfaisante pour personne :

Pour maintenir la qualité du code HTML, nous tentons un prototype sans Bootstrap, avec du code SASS custom. Le projet constitue le Thème Osuny AAA.