CSS peut être difficile à gérer dans un projet, en particulier lorsque vous avez besoin d'inclure des requêtes média pour différents points d'arrêt et de repli pour les anciens navigateurs. Dans cet article, nous verrons comment utiliser Fractal pour gérer les composants qui utilisent CSS Grid.

Dans cet article, basé sur l'exposé que j'ai donné à Smashing Conference à Toronto, je vais décrire une méthode de travail que j'ai adoptée au cours des deux dernières années et qui m'aide à gérer le CSS dans mes projets.

Je vais vous montrer comment utiliser l'outil de bibliothèque de motifs Fractal pour gérer votre CSS sur une base de composant, tout en vous permettant d'utiliser les outils que vous connaissez déjà. Bien que cela serve d'introduction à Fractal, et que nous ayons choisi cette bibliothèque de modèles particulière, il est probable que cette façon de travailler passerait à d'autres solutions.

Nos projets

Mon entreprise a quelques produits – Perch et Perch Runway CMS et Notist, un logiciel en tant qu'application de service pour les haut-parleurs publics. Ces produits sont assez différents, d'autant plus que Perch est un système auto-hébergé et Notist est SaaS, cependant, ils ont tous deux beaucoup d'interface utilisateur à développer. Nous disposons également de tous les sites Web et de la documentation associés à ces produits, ainsi que d'autres éléments sur lesquels nous travaillons, tels que le site Web 24 Ways. Après avoir découvert Fractal il y a deux ans, nous avons déplacé chaque nouveau projet – grand et petit – dans Fractal.

Problèmes que nous voulions résoudre

J'ai commencé à étudier les solutions de bibliothèque de modèles il y a deux ans. version 3. Une fonctionnalité de Perch est que les modèles que vous créez pour la sortie de contenu sur votre site Web deviennent le schéma de l'interface utilisateur d'administration. Cela signifie que tout type de champ utilisé dans un modèle doit pouvoir exister à côté de n'importe quel autre type de champ. Nous ne savons pas comment nos clients pourraient les combiner, et il existe un grand nombre de combinaisons possibles. Ce n'est pas non plus un "site web", et je n'ai pas voulu essayer de forcer la bibliothèque de patterns à organiser quelque chose pour organiser des patterns de site web.

Perch est auto-hébergé – les gens le téléchargent et l'hébergent sur leurs propres serveurs nous devons utiliser la pile technologique la plus simple possible afin de ne pas placer d'obstacles supplémentaires à l'entrée devant les personnes, dont beaucoup sont novices dans l'utilisation d'un CMS. Pour ajouter un niveau de plaisir supplémentaire, nous prenons en charge Internet Explorer 9, mais j'avais l'intention d'utiliser beaucoup de Flexbox – comme avant la mise en page de grille.

Je voulais aussi éviter d'utiliser des outils qui nous ont beaucoup appris sur notre façon de travailler et de changer complètement notre processus. Tout outil supplémentaire ou modification de la façon dont vous travaillez sur vos projets apporte de nouvelles frictions. Vous pouvez résoudre un problème, mais apporter un tout nouvel ensemble de problèmes si vous faites de grands changements dans votre façon de travailler. Dans notre cas, nous utilisions Sass de manière assez limitée et nous l'utilisions en utilisant Gulp. Aucun de nos projets n'utilise un framework Javascript, nous ne faisons qu'écrire du HTML, du CSS et du JavaScript.

Fractal correspond parfaitement à nos besoins. Il est agnostique quant à la façon dont vous développez ou les outils que vous souhaitez utiliser. Surtout pour nos objectifs, il ne supposait pas que nous construisions un site Web. L'expérience a été si réussie que nous nous sommes retrouvés en utilisant Fractal pour chaque projet, petit ou grand, car cela rend le processus de travail sur CSS beaucoup plus simple. Même les petits sites que je crée moi-même démarrent souvent la vie dans Fractal, car il y a plus d'avantages que vous ne le pensez en termes de travail avec une bibliothèque de modèles, et beaucoup de ces avantages ont autant de sens pour une équipe

Avant de penser à la façon de développer en utilisant Fractal et pourquoi je pense que cela a du sens pour les petits projets comme pour les grands, voyons comment créer l'environnement. 19659007] L'approche la plus simple pour travailler avec Fractal est d'aller sur le site Web de Fractal et de jeter un coup d'œil au Guide de démarrage . Vous devez d'abord installer Fractal globalement, vous pouvez ensuite suivre les étapes listées ici pour créer un nouveau projet Fractal.

Maintenant que votre nouveau projet est installé, passez à la ligne de commande dans le dossier que vous venez de créer et exécutez la commande:

 fractal start --sync 

Cela démarrera un petit serveur au port 3000, donc vous devriez pouvoir aller à http: // localhost: 3000 dans un navigateur web et voir votre projet.

Maintenant que votre projet est opérationnel, ouvrez le dossier du projet dans votre éditeur de texte favori et recherchez le composant exemple sous components / example . Vous trouverez un fichier de configuration et un fichier nommé example.hbs . Le modèle example.hbs est le code HTML de votre composant, vous pouvez ajouter un peu plus de code HTML et Fractal le rechargera automatiquement et l'affichera. Changez le fichier à:

 Ceci est mon titre 
 {{text}} 
 

Vous devriez voir l'en-tête apparaître dans le navigateur. Le fichier de configuration peut être utilisé pour ajouter du contenu et configurer autrement votre composant. Si vous voulez lire votre texte d'en-tête dans ce fichier, éditez-le pour ressembler à l'exemple suivant:

 title: Exemple de composant
le contexte:
    texte: Ceci est un exemple de composant!
    titre: Mon titre 

Maintenant, changez votre fichier example.hbs à lire dans ce texte

 {{heading}} 
 {{text}} 

Ajouter des composants supplémentaires

] Vous pouvez suivre le modèle du composant exemple pour ajouter le vôtre. Au minimum, vous avez besoin d'un dossier (le nom du composant) et d'un fichier .hbs utilisant le même nom. Vous pouvez ajouter le fichier de configuration si vous voulez définir les options de configuration.

Les composants peuvent être imbriqués dans des dossiers pour faciliter la localisation de composants particuliers, et la façon dont vous les structurez vous appartient entièrement.

Note : Il est vraiment facile de se retrouver à passer beaucoup de temps à s'inquiéter de la façon de nommer ses composants. Dans Fractal au moins, renommer et également réorganiser les composants dans des dossiers est simple. Vous pouvez les renommer ou les déplacer et Fractal mettra à jour pour afficher la nouvelle structure. Je trouve souvent que la structure idéale ne devient apparente qu'au fur et à mesure que je me développe, donc je ne m'inquiète pas trop au début et je la raffermis plus tard.

Ajouter un flux CSS

Jusqu'à présent, nous sont capables de créer des composants HTML comme des modèles de guidons, et un fichier de configuration pour insérer des données, cependant, nous n'avons pas ajouté de CSS. Idéalement, nous voulons ajouter le CSS pour chaque composant dans le même dossier que le reste des fichiers composant et ensuite combiner tous ensemble.

J'ai mentionné que Fractal fait très peu d'hypothèses sur votre flux de travail; En raison de cela, il fait beaucoup moins hors de la boîte que si vous étiez en train de vous forcer une façon particulière de travailler. Cependant, nous pouvons assez facilement faire fonctionner Fractal avec une configuration Gulp.

Combiner Fractal, Sass, et Gulp

Ce qui suit décrit une configuration minimale utilisant Gulp et Sass pour créer un seul fichier CSS de sortie. Heureusement, vous pouvez suivre ce processus pour faire tout ce que vous feriez normalement dans Gulp. La chose la plus importante à noter est que la plupart de ces éléments ne sont pas spécifiques à Fractal, donc une fois que la partie Fractal fonctionne, vous pouvez ajouter n'importe quoi d'autre en suivant les mêmes modèles. Si vous êtes familier avec un autre outil de construction, il est probable que vous pourriez créer un processus similaire; Si vous le faites, et que vous êtes heureux de partager, faites-le nous savoir dans les commentaires.

Tout d'abord, vous pourrez suivre le code listé dans ce tutoriel, les emplacements de vos fichiers Sass et votre sortie CSS finalement être différent du mien. L'élément clé est que le fichier CSS de sortie doit se trouver quelque part dans le dossier public.

1. Dans le dossier public de votre installation Fractal, ajoutez un dossier nommé css . ] Dans le dossier racine de votre Fractal, installez un dossier assets à l'intérieur duquel se trouve un dossier scss . Créez un fichier Sass nommé global.scss dans ce dossier. Dans ce fichier, ajoutez la ligne suivante:

    @import "../../components/**/*.scss";

     

2. Créez un fichier nommé example.scss dans votre répertoire de composants exemple .
3. Créez gulpfile.js dans la racine de votre projet Fractal et ajoutez le code ci-dessous.

 'use strict';

const gulp = require ('gulp');
const fractal = require ('./ fractal.js');
const logger = fractal.cli.console;
const sass = require ('gulp-sass');
const sassGlob = require ('gulp-sass-glob');
const plombier = require ('gulp-plombier');
const notify = require ('gulp-notify');
const path = require ('chemin');

gulp.task ('sass', function () {
    return gulp.src ('assets / scss / ** / *. scss')
    .pipe (customPlumber ('Error running Sass'))
    .pipe (sassGlob ())
    .pipe (sass ())
    .pipe (gulp.dest ('public / css'))
});

gulp.task ('watch', ['sass']function () {
   gulp.watch ([
        'components/**/*.scss',
        'assets/scss/**/*.scss'
        ]['sass']);
});

function customPlumber (errTitle) {
    renvoyer un plombier ({
        errorHandler: notify.onError ({
            titre: errTitle || "Erreur lors de l'exécution de Gulp",
            message: "Erreur:",
        })
    });
}

gulp.task ('fractal: start', function () {
    serveur const = fractal.web.server ({
        sync: true
    });
    server.on ('error', err => logger.error (err.message));
    return server.start (). then (() => {
        logger.success (`Le serveur Fractal fonctionne maintenant à $ {server.url}`);
    });
});

gulp.task ('default', ['fractal:start', 'sass', 'watch']); 

J'installe ensuite les dépendances listées en haut du fichier. Si vous deviez les installer à la ligne de commande, vous exécuteriez:

npm installez gulp gulp-sass gulp-sass-glob gulp-plombier gulp-notify

Le sass ] function compile le Sass à partir des assets en un seul fichier, et le sort dans le dossier public .

 gulp.task ('sass', function () {
return gulp.src ('src / assets / scss / ** / *. scss')
.pipe (customPlumber ('Error running Sass'))
.pipe (sassGlob ())
.pipe (sass ())
.pipe (gulp.dest ('public / css'))
});

Je crée ensuite une fonction de watch qui surveillera mon Sass dans assets et aussi dans des composants individuels et le compilera dans le dossier en public.

 gulp.task ( 'watch', ['sass']function () {
   gulp.watch ([
'components/**/*.scss',
'assets/scss/**/*.scss'
]['sass']);
});

C'est mon bâtiment CSS. Je veux maintenant faire en sorte que je puisse courir gulp et il démarrera la surveillance du fichier CSS ainsi que le démarrage fractal. Je fais cela en créant une tâche gulp pour lancer la commande fractal start.

 gulp.task ('fractal: start', function () {
serveur const = fractal.web.server ({
sync: true
});
server.on ('error', err => logger.error (err.message));
return server.start (). then (() => {
logger.success (Le serveur Fractal fonctionne maintenant à $ {server.url});
});
}); 

Enfin, je dois m'assurer que le bâtiment Sass et le départ de Fractal s'exécutent quand je lance gulp et la ligne de commande:

gulp.task ('default', 'fractal: start', ' sass ',' watch ');

C'est mon travail terminé gulpfile.js . Si vous ajoutez ceci dans votre projet Fractal par défaut, assurez-vous que les dossiers sont en place pour les chemins mentionnés. Vous devriez pouvoir aller à la ligne de commande, exécuter gulp et Fractal va commencer.

Nous pouvons tester notre Sass en ajoutant une variable dans le fichier global.scss ; vous devrez ajouter ceci au-dessus de la ligne qui inclut les composants pour que la variable soit disponible pour ces composants.

 $ color1: rebeccapurple; 

Puis dans example.scss ajoutez une règle pour le niveau 1 nous avons ajouté plus tôt:

 h1 {
  couleur: $ color1;
} 

Si tout est correctement configuré, vous devriez trouver un fichier .css dans public / css qui contient la règle:

 h1 {
  couleur: rebeccapurple;
} 

Nous devons faire encore une chose pour que nous puissions prévisualiser nos composants en utilisant le CSS que nous sommes en train de construire. Nous devons créer un fichier d'aperçu, qui sera lié dans la feuille de style du dossier public.

Dans le dossier de vos composants, créez un fichier nommé _preview.hbs .

Le fichier de prévisualisation est essentiellement un document HTML, reliant notre CSS et tout ce que vous devez inclure. Dans le corps est une étiquette {{yield}} et c'est là qu'un composant sera placé.

 




	
	


	 {{{yield}}}

 

Note : Le dossier public peut également contenir tous les autres éléments que vous devez afficher dans des composants tels que des images, des polices, etc.

La bibliothèque comme source de vérité

Comme nous l'avons vu, Fractal peut construire notre CSS. Dans nos projets, nous faisons en sorte que Fractal soit le seulement endroit où nous construisons et traitons les CSS et autres actifs pour le site. Cela signifie que notre bibliothèque de modèles et notre site ou application ne dérivent pas. La dérive se produit après le déploiement du site si les utilisateurs commencent à modifier le CSS du site et à ne pas ramener ces modifications à la bibliothèque de modèles. Si vous pouvez faire de la bibliothèque de patterns l'endroit où CSS est traité, alors les changements doivent commencer là – ce qui empêche la dérive entre le site et la bibliothèque.

Nous construisons tout dans Fractal puis copions ces assets publics sur les sites live être déployé. En plus de prévenir les dérives entre les systèmes, il facilite également la gestion des CSS dans le contrôle des sources. Lorsque plusieurs personnes travaillent sur un fichier CSS, les conflits de fusion peuvent être raisonnablement difficiles à gérer. Avec des personnes travaillant sur des composants individuels dans la bibliothèque de modèles, vous pouvez généralement éviter que deux personnes ne modifient le même fichier à la fois, et si c'est le cas, il ne reste qu'un petit fichier à trier et pas tout le CSS

Une première approche pour gérer les repliures de la bibliothèque de patterns

J'ai découvert que la bibliothèque de patterns de travail rend d'abord le traitement des fallbacks dans votre code beaucoup plus simple et moins accablant que d'essayer de réparer un site complet. Cela nous permet également de nous concentrer sur le meilleur des cas possibles, et d'être créatif avec de nouvelles techniques, plutôt que de limiter ce que nous faisons en étant inquiet de la façon dont nous allons le faire fonctionner correctement dans les navigateurs non supportés.

à un cas simple d'un composant d'objet média pour voir comment cela pourrait fonctionner. Pour continuer, créez un dossier media dans les composants de Fractal, puis ajoutez les fichiers media.hbs et media.scss .

Commencez par un bon balisage

Votre point de départ devrait toujours être un balisage bien structuré. Dans la bibliothèque de patterns, il se peut que vous utilisiez ce composant avec une plage de balisage, par exemple, vous pourriez utiliser un composant avec du contenu balisé comme une figure dans un endroit et juste avec des divs dans un autre. Votre contenu devrait cependant être structuré de manière logique et être lu de haut en bas.

Cela garantit que votre contenu est accessible à un niveau très basique, mais cela signifie également que vous pouvez tirer parti des flux normaux. . Normal Flow est la manière dont les navigateurs affichent votre contenu par défaut, les éléments de bloc progressant les uns après les autres dans la dimension de bloc et les éléments en ligne – tels que les mots d'une phrase – s'exécutant le long de l'axe. Pour beaucoup de contenu qui correspond exactement à ce que vous voulez, et en profitant du flux normal plutôt que de le combattre, vous facilitez grandement votre travail lorsque vous créez votre mise en page.

Par conséquent, mon composant a le balisage suivant à media.hbs .

 


  

    
  
  
 Ceci est mon titre 
  

      
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque porta s'asseoir amet nulla vitae luctus. Praesent quis risus id dolor venenatis condimentum 
  
  

     Un pied de page optionnel va ici.
  
 

Vous pouvez voir comment cela s'affiche ensuite à l'intérieur de Fractal

Une fois que j'ai le balisage que je veux, je vais travailler sur l'affichage de bureau que j'ai en tête. Je vais utiliser CSS Grid Layout et la méthode grid-template-areas pour ce faire. Ajoutez ce qui suit à media.scss .

 img {max-width: 100%; }

.media> .title {
  zone de grille: titre;
}

.media> .img {
  zone de grille: img;
}

.media> .content {
  zone de grille: bd;
}

.media> .footer {
  zone de grille: ft;
}

.médias {
  marge-bas: 2em;
  affichage: grille;
  grille-colonne-écart: 20px;
  grid-template-columns: 200px 3fr;
  zones de gabarit de grille:
    "img titre"
    "img bd"
    "img ft";
  } 

Nous avons maintenant une disposition simple d'objet de médias:

Quelque chose que vous pouvez faire dans Fractal consiste à ajouter des variations d'un composant. Vous voudrez peut-être retourner l'objet média pour que l'image soit sur la droite.

Maintenant, ajoutez le CSS à media.scss afin de retourner la mise en page:

 .media.media-flip {
grid-template-columns: 3fr 200px;
zones de gabarit de grille:
  "titre img"
  "bd img"
  "im img";
  }

Il existe deux façons de créer des variantes: basées sur des fichiers et basées sur la configuration. File-based est le plus simple et est également utile si votre variante a un balisage différent. Pour créer une variante basée sur un fichier, faites une copie de votre composant dans le dossier media avec le nom media – flip.hbs (c'est deux tirets dans le nom de fichier).

Ce composant doit avoir le même balisage avec la classe media-flip ajouté à la première ligne, et vous pourrez ensuite voir les deux versions.

Alternativement, comme dans ce cas tout ce que nous devons faire est d'ajouter une classe, vous pouvez créer une variante en utilisant un fichier de configuration.

Si vous voulez faire cela, supprimez votre fichier de variante et ajoutez un fichier de configuration named media.config.json contenant le code suivant:

 {
    "title": "Objet média",
    "le contexte": {
        "modificateur": "par défaut"
    },
    "variantes": [
        {
            "name": "Flipped",
            "context": {
                "modifier": "flip"
            }
        }
    ]
}

Puis modifiez la première ligne de media.hbs comme suit:

Note : Vous pouvez ajouter autant de variantes que vous le souhaitez (consultez la documentation pour les variantes pour en savoir plus.)

Nous pouvons maintenant envisager d'ajouter des CSS pour modifier la disposition en fonction de la taille de l'écran. Envelopper la mise en page que nous avons créée dans une requête de support et, au-dessus, en créant une disposition de colonne unique pour les périphériques plus petits.

 img {
  largeur maximale: 100%;
}

.media> .title {
  zone de grille: titre;
}

.media> .img {
  zone de grille: img;
}

.media> .content {
  zone de grille: bd;
}

.media> .footer {
  zone de grille: ft;
}

.médias {
  affichage: grille;
  grille-colonne-écart: 20px;
  zones de gabarit de grille:
    "Titre"
    "img"
    "bd"
    "ft";
  }
  
  @media (min-width: 600px) {
    .médias {
      marge-bas: 2em;
      affichage: grille;
      grille-colonne-écart: 20px;
      grid-template-columns: 200px 3fr;
      zones de gabarit de grille:
        "img titre"
        "img bd"
        "img ft";
    }

    .media.media-flip {
      grid-template-columns: 3fr 200px;
      zones de gabarit de grille:
        "titre img"
        "bd img"
        "im img";
    }
} 

Ensuite, tout comme nous gérons la vue des périphériques plus petits au sein de notre composant, nous pouvons gérer la mise en page pour les anciens navigateurs qui ne supportent pas la grille.

Dans ce cas, je vais créer un repli flottant (Cela fonctionnera pour à peu près n'importe quel navigateur existant). Je ne vais m'inquiéter à ce sujet pour des tailles d'écran plus larges et laisser le composant affichant dans le flux normal pour les appareils mobiles plus anciens.

Juste à l'intérieur de la requête média, ajoutez le CSS suivant:

 .media: after {
  contenu: "";
  affichage: table;
  clarifier les deux;
}

.media> .media {
  marge gauche: 160px;
  clarifier les deux;
}

.media .img {
  float: à gauche;
  marge: 0 10px 0 0;
  largeur: 150px;
}

.media.media-flip .img {
  Flotter à droite;
  marge: 0 0 0 10px;
}

.media> * {
  marge: 0 0 0 160px;
}

.media.media-flip> * {
  marge: 0 160px 0 0;
} 

Cela devrait trier l'affichage dans les navigateurs non-grille. Pour les navigateurs prenant en charge la grille, vous n'avez pas besoin de vous soucier des flottants, c'est-à-dire lorsque l'élément flottant devient un élément de la grille, le flottant est supprimé. Ce qui sera un problème, ce sont les marges. La disposition dans les navigateurs prenant en charge la grille sera désormais espacée en raison des marges supplémentaires.

C'est ici que nous pouvons ajouter une requête, en supprimant les marges si nous savons que notre navigateur supporte la grille.

 @supports (display: grid) {
  .media> *,
  .media.media-flip> * {
    marge: 0;
  }

  .media .img,
  .media.media-flip .img {
    largeur: auto;
    marge: 0;
  }
  
  .media: après {
    contenu: aucun;
  }
} 

C'est notre petit composant fini. Bien que ce soit un exemple simple – et il pourrait être argumenté que c'est un qui n'a pas vraiment besoin de grille du tout si vous avez besoin d'un repli – cela démontre l'approche que je prends dans tous mes projets,

Pour mettre en production mon fichier CSS, nous pouvons prendre le fichier CSS du dossier public et l'ajouter à notre site de production. Vous pouvez même programmer ce processus pour le copier dans le dossier de votre site au fur et à mesure de sa construction.

Premier cas de test réduit Premier développement

Quelque chose que j'ai découvert comme avantage clé dans ce travail, pièce de support du puzzle plus facile. Non seulement il est plus facile de voir quelle CSS de secours est incluse avec ce composant, mais aussi si nous avons des problèmes avec un navigateur, il est beaucoup plus facile de les déboguer.

Lorsque vous êtes confronté à un problème de navigateur, On vous demandera généralement de créer un scénario de test réduit . Réduire le problème à la plus petite chose qui expose le problème. Un composant dans une bibliothèque de modèles est souvent très proche de ce cas de test réduit. Certainement plus proche que si vous essayez de déboguer un problème tout en regardant votre site Web entier.

En plus de faciliter le débogage du navigateur, le fait d'avoir vos replis inclus avec le reste du CSS facilite le retrait du code de repli n'est plus nécessaire, il est évident que ce code de repli est pour ce composant. Je sais que le supprimer ne changera pas la façon dont tout le reste s'affiche.

Cette facilité d'organisation de notre code est vraiment la raison pour laquelle Fractal est logique même dans les petits projets. Étant donné que nous avons tendance à utiliser Gulp et Sass de toute façon (même pour des projets plus petits), l'ajout de Fractal au mélange n'est pas un gros problème. Nous n'avons pas besoin de le voir seulement pour nos plus gros projets, car même un petit site pourrait avoir une quantité raisonnable de CSS

Voir le code

J'ai créé un projet GitHub qui a tout le code mentionné dans l'article. Je suggère de mettre en place Fractal comme décrit dans l'article, puis en saisissant tous les bits – comme le gulpfile ou la mise en page d'aperçu, de mon dépôt.

Comme référence supplémentaire et pour voir quelques projets Fractal publiés, nous avons la version publiée de Perch Pattern Library ainsi que la bibliothèque de modèles pour 24 Ways (construite par Paul Robert Lloyd ), que vous pouvez consulter. Ce sont de bons exemples d'une bibliothèque de modèles non-site Web, et un plus traditionnel utilisé pour un site.

Comment Vous Gérer CSS?

J'aime vraiment cette façon de travailler; cela me permet d'écrire du CSS de manière simple et progressive. Selon le projet, nous pouvons inclure beaucoup plus d'outils et de traitement de fichiers. Ou, je construis peut-être un site simple dans lequel cas la configuration sera à peu près comme nous l'avons vu dans cet article – avec un léger traitement de Sass. Le fait que Fractal signifie que nous pouvons avoir le même processus pour les sites grands et petits, pour les applications web ou les sites Web. Cela signifie que nous pouvons toujours travailler de manière familière.

Cela fonctionne pour nous, et j'espère que cet article pourrait vous donner quelques choses à expérimenter. Cependant, j'aimerais savoir comment vous et votre équipe avez abordé la gestion de CSS dans vos projets et les forces et les faiblesses des approches que vous avez essayées. Je serais particulièrement intéressé d'entendre quelqu'un qui a développé un processus similaire en utilisant une autre solution de bibliothèque de modèles. Ajoutez vos expériences dans les commentaires.

(il)