Un processus d’intégration maintenable

Retour d'expérience

Bon matin

Je m’appelle Morgane,
je suis lead dev front-end
au quotidien Le Figaro


Twitter : @Nazcange
contact@morgane-herve.fr

CSS n’est pas maintenable !

Les faits

  • Un fichier de plusieurs milliers de lignes
  • Ajout des modifications en fin de fichier ⇒ plus facile mais moins propre

Des CSS lourds chargeant du code mort


.nuage-radioactif {
    width: 100%;
    margin-left: -200%;
    border: none;
}

[...]

/* quickfix */
.nuage-radioactif {
    display: none;
}

Résultat

  • Empilement de surcharges
  • Utilisation du !important
  • Augmentation du nombre de lignes

Refonte responsive

Un même design, plusieurs sites

  • Déclinaison du design sur plusieurs sites
  • Différents supports (Symfony, Drupal, PHP…)

Un header de leader

Un projet unique pour les gouverner tous

Création d’une base commune Symfony/Twig/Sass/Js

⇒

Mise à jour simplifiée des évolutions graphiques et fonctionnelles

Comment a-t-on rendu tout cela maintenable ?

Les préprocesseurs à la rescousse

  • Découpage des CSS en plusieurs fichiers
  • Moins de lignes à lire pour trouver le code à modifier
  • Utilisation de variables pour plus de flexibilité
  • Automatisation d’écriture de code redondant (mixins, fonctions…)

Mais ils ne font pas tout

On ne maîtrise plus le CSS généré :

                    
@mixin mixin-with-media() {
    @media (min-width: 61.25em) {
        float: right;
        width: 30%;
    }
}

.ma_class {
    font-size: 1.2rem;

    @media (max-width: 19.99em) {
        @include mixin-with-media();
    }
}
                    
                
                    
.ma_class {
    font-size: 1.2rem;
}

@media (min-width: 61.25em) and (max-width: 19.99em) {
    .ma_class {
        float: right;
        width: 30%;
    }
}

Améliorer la lisibilité de son code

Ne pas séparer les media queries par fichier


bloc.scss
bloc_tablette.scss
bloc_desktop.scss

Tirer parti de la cascade dans les fichiers Sass

                    
.ma_class {
    font-size: 1.2rem;

    @media (min-width: 61.25em) {
        font-size: 1.5rem;
    }
}

Ne pas réinventer la roue

Il est possible que ce que vous cherchez existe déjà


Utilisation de bibliothèques externes comme :

  • sass-mq (gestionnaire et générateur de media queries)
  • Susy (générateur de grilles CSS personnalisées)

Les post-processeurs pour automatiser

  • Ajout des préfixes grâce à autoprefixer
  • Minification du code avec csswring (gain ≃ 19%)
  • Ordonnancement pour une meilleure compression avec csscomb (gain de 2,73%)

Des tasks runners en Js

Remplacement de Ruby par JS
(3s de compilation vs 0,3ms)

Mise en place de tâches avec Gulp :

  • initialisation du projet (copie de fonts, images…)
  • génération à chaque changement (watch)
  • à la demande (build)
  • spécifique au déploiement (build-prod)

BEM c’est bon, mangez-en

Une méthodologie de nommage des blocs

Un bloc = un fichier sass (_menu.scss)
⇒ Simplification de la recherche de code

Travail d’équipe

  • Ne pas tout imposer
  • Des décisions collégiales
  • Lint de code obligatoire
  • Relecture et validation par au moins 2 personnes

Résultats

  • Gain de temps
  • Un CSS propre et optimisé en sortie

En conclusion

Travail sur le long cours

  • Allez-y par étapes
  • Travaillez en équipe
  • Trouvez les bons processus
  • Mettez en place de la revue de code
  • Augmentez le bus factor

Continuer d’apprendre

Lisez les publications existantes (livre, blogs …)

Échangez avec des experts, des personnes du métier, vos collègues…

Recueillez des retours d’expériences à travers des conférences, Twitter…

Q@uestions ?

Références

Smashing magazine

CSS-TRICKS

Merci !

Crédits