CSS Tu peux pas test !
Le CSS et la qualité
la vérité qui fâche
Le CSS, ce n'est pas simple !
CSS is like a bear cub.
Le CSS, ce n'est pas simple !
It’s almost a challenge to find a development team that’s working on a codebase that’s more than a couple of years old where the CSS isn’t the most frightening and hated part of that system.
Qui suis-je ?
Thomas Zilliox.
Je suis un expert CSS indépendant.
Je sais produire du code CSS maintenable...
...au moins par moi-même !
Et après ?
Le bug CSS typique
Celui responsable d'au moins 18 tickets JIRA
Le bug CSS typique
.header {
padding: 0.5em 1em;
overflow: hidden;
background: black;
color: white;
white-space: nowrap;
text-overflow: ellipsis;
}
Le bug CSS typique
.header {
padding: 0.5em 1em;
/* overflow: hidden; */
background: black;
color: white;
white-space: nowrap;
text-overflow: ellipsis;
}
Le bug CSS typique
.header {
[...]
}
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Le bug CSS typique
.header {
display: inline-block;
}
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Le bug CSS typique
.header { [...] }
.ellipsis {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Le bug CSS typique
.header { [...] }
.home-item { display: flex }
.ellipsis {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Le bug CSS typique
body {
word-wrap: break-word;
}
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Le bug CSS typique
body {
word-wrap: break-word;
}
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Les sources de la complexité
Résumons !
La complexité du CSS
- 355 propriétés dans CSS3
- Une infinité de déclarations par sélecteurs
- Une infinité de sélecteurs par projet
La complexité du CSS
5 545 sélecteurs 9 789 déclarations
4 525 sélecteurs 7 443 déclarations
3 280 sélecteurs 6 655 déclarations
2 511 sélecteurs 4 811 déclarations
1 447 sélecteurs 2 443 déclarations
La complexité du HTML
- Une infinité de sélecteurs CSS par élément HTML
- Une infinité d'éléments HTML par sélecteurs CSS
- Des propiétés héritées des noeuds HTML parents
La complexité du HTML
- 4 052 éléments HTML
- 3 776 éléments HTML,
- 3 492 éléments HTML
- 2 751 éléments HTML
- 1 791 éléments HTML
La complexité des navigateurs
- Une infinité de configurations visiteurs possibles : appareils, OS, navigateurs, extensions, etc.
- Chaque 6 semaines, une version de Chrome et Firefox
- Du code qui a pu connaître d'autres temps
La complexité de l'intégration
- CSS
- HTML
- Les navigateurs
- ET ?
La complexité humaine
La complexité humaine
Quelle que soit l'énergie que vous y investirez,
un niveau de qualité n'est jamais un acquis en CSS !
Tester du code
Ceux qui nous préviennent quand on fait une bourde !
Tester du code
Ce problème a été résolu du côté du code algorithmique :
- Tests unitaires
- Tests fonctionnels
- Analyseur de code statique (linter)
Tester du code
Tester du code
Sur 6play.fr :
- 1500+ tests unitaires
- 2300+ étapes de tests fonctionnels
Tester du CSS
C'est à partir de maintenant que c'est intéressant !
Tester du CSS
Les revues de code c'est bien !
Elles permettent de prévenir la majorité des erreurs.
Tester du CSS
Tester du CSS
Sauf que c'est illisible !
Comment rendre la revue de code de CSS efficace ?
Tester du CSS
Tester du CSS
Tester du CSS
Tester du CSS
Le style guide permet de documenter les composants :
- Aux designers
- Aux développeurs
Tester du CSS
Tester du CSS
Il permet aussi de les visualiser sans leur contexte d'utilisation.
C'est un excellent bac à sable.
C'est l'équivalent des TUs !
Tester du CSS
Un seul bémol
Il y a un seul bémol sur ces tests automatiques...
Un seul bémol
Il s'agit de notre objectif !
Tester du CSS aujourd'hui
et pour toutes les tailles de projet stp.
Captures d'image
Les différentiel de capture d'écrans existent :
- Gemini — basé sur Selenium, open-source
- WebdriverCSS — plugin webdriver, open-source
- Backtrac.io — crawler, saas
- Percy.io — GitHub CI, saas
Captures d'image
Mais ce n'est pas utilisable :
- Sur tous les navigateurs
- Sur du contenu dynamique
- Sur des pages entières
Captures d'image
Pour être pérenne, il faudrait le coupler avec un style guide.
Encore faut-il en avoir un !
Captures d'image
Tests sur différents navigateurs
Les tests automatisés sur device sont possibles :
- BrowserStack
- Saucelabs
Tests sur différents navigateurs
Les tests fonctionnels peuvent contenir des tests graphiques.
Vérifier qu'un élément :
- est visible
- est dans le viewport
- ne dépasse pas de son parent
Tests sur différents navigateurs
Par contre c'est très long !
Impossible de valider tous les navigateurs sur toutes les PRs
Les linters
Les linters et formateurs CSS et Scss existent :
- stylelint.io — prévient les erreurs de syntaxes
- csscomb.com — ordonnacement des propriétés
- prettier — formateur JS également
Les linters
Les linters
Bemlinter permet de valider sur CSS et SCSS :
- La syntaxe BEM
- L'isolation des composants
Les linters
Les linters
Première tentative :
- Analyser tous les fichiers
- Autoriser une blocklist
Les linters
Deuxième tentative :
- Enregistrer les erreurs existantes
- Alerter sur les nouvelles erreurs
Conclusion
- Ajoutez un linter et formateur
- Ajoutez bemlinter
- Ajoutez des contrôles visuels à vos TFs
- Jouez vos TFs sur plusieurs navigateurs
- Partagez un style guide
Mais ce ne sont pas des tests !?
En même temps c'était dans le titre de la conf.
Et le côté humain ?
- Évitez les excès de confiance
- Adoptez une méthodologie
- Formez toute l'équipe aux CSS
- Aimez vos intégrateurs <3
Merci !
Des questions ?
@iamtzi
tzi.fr/slides/pw2017
tzi.fr/slides/pw2017.pdf