Pourquoi et comment construire son propre framework CSS

Après avoir longtemps travaillé avec KNACSS (obsolète depuis), la question d'une base de travail pour mes projets se posait. Construire son propre framework CSS à partir de zéro peut sembler un peu fou, mais le temps investit au départ est largement compensé par la compréhension globale et sa facilité de mise en œuvre dans des projets concrets !

Acquérir des compétences

C'est l'un des premiers avantages : travailler sur ce type de projet permet l'acquisition de compétences spécifiques, une compréhension plus approfondie des subtilités des CSS et une expérience d'apprentissage des plus agréable - sans doute plus intéressante que n'importe quelle formation !

Adapté à vos besoins et votre méthode de travail

Les frameworks existants sont généralistes et prévoient un support large et de nombreux cas de figure (par exemple un système de grille à 12 colonnes, pour ma part, je n'ai jamais dépassé 5) et sont donc souvent plus lourd, même en n'incluant que les composants que vous utilisez.
À titre d'exemple, je n'ai pas ajouté le support de progress que je n'ai jamais employé.

On commence par définir la structure

Vous pouvez vous inspirer de projets existants pour créer votre propre structure (en SASS, Less ou CSS). Généralement, la base se constitue de variables, d'un mini reset, d'une base pour la typographie et l'espacement, sans oublier l'accessibilité.
Une seconde partie se constitue de composants et d'utilitaires comme les formulaires, les tables, un système de grille, etc.
Le but est de rester le plus minimaliste possible et de n'y inclure que ce que vous utilisez régulièrement.

Voici la structure de mon projet en SASS - c'est une méthode parmi d'autre, à adapter selon vos besoins et votre méthode de travail.

/* ==Core */
@import "variables.scss";
@import "reset.scss";  
@import "a11y.scss"; 
@import "layout.scss"; /* Typography & Spacings */

/* ==Utilities & Components */
@import "helpers.scss";
@import "skip.scss";
@import "tables.scss";
@import "pre.scss";
@import "video.scss"; 
@import "alerts.scss";
@import "badges.scss";
@import "details.scss"; /* Details & Summary */
@import "burger.scss"; /* Menu */

/* ==Forms */
@import "forms.scss";
@import "formscheckbox.scss";
@import "formsselect.scss";
@import "formsradio.scss";
@import "formspassword.scss";
@import "buttons.scss";

/* ==Grids */
@import "grids.scss"; /* Grid 2-5 */

/* ==Utilities 2 */
@import "responsive.scss";
@import "print.scss"; 

/* ==Customer Styles  */
@import "customer.scss";

Quelques astuces

• Limiter les couleurs au strict minimum.
• Limiter l'usage des classes et des variables, surtout les variables CSS.
• Séparer au maximum les composants - en regardant le code ci-dessus, vous verrez un fichier séparé pour les champs de mots de passe (que je n'utilise pas sur tous les sites).
• Intégrer l'accessibilité - avec une compatibilité WCAG et RGAA - dès le début de la conception (typographie, contraste, espacement des lignes et des paragraphes, etc).
• Ajouter quelques classes utilitaires de base comme le centrage de textes et le centrage vertical à l'intérieur d'un bloc.
• Ajouter des composants de base que vous utilisez régulièrement comme ribbon, cards, hero section, etc.

Tester et documenter (si besoin)

Créer une page de test incluant tous les composants et différentes variations : bloc de texte, balises h1 à h6, composants de formulaire, boutons, grilles, etc. Vous pourrez ainsi établir une stratégie pour effectuer des tests complets sur différents navigateurs et appareils (ordinateurs, mobiles et même téléviseurs).

Maintenance

Si votre code est bien conçu et structuré dès le départ, la maintenance reste assez faible - généralement 2 ou 3 fois par an : parfois quelques bugs visuels ou l'ajout de nouveautés CSS. Par exemple, j'ai récemment ajouté le support de aspect-ratio pour les vidéos.

Allez plus loin

Si vous souhaitez développer encore un peu plus votre framework, vous pouvez ajouter de nombreux éléments en fonction de vos besoins :

• Boutons de partages.
• Le support étendu du focus.
• Le support des téléviseurs HD et 4K.
• Des templates prêts à l'emploi avec grid-template-areas : articles, galerie d'images, page d'accueil, etc.