Nous l'avons vu précédemment, Vue est facile d'utilisation. Et c'est notamment dû à l'amélioration continue. Si vous ne souhaitez pas travailler avec un outil, pas de problème ; en revanche, le jour où vous en aurez besoin, sa configuration sera très simple ! Et c'est encore plus pratique si vous souhaitez ajouter du style à votre application, c'est-à-dire gérer le CSS de votre application.
Configurez un préprocesseur
Actuellement, lorsqu'il s'agit d'écrire du CSS, la plupart des codebases frontend utilisent un préprocesseur (comme Sass, LESS, etc.).
Et pour utiliser des préprocesseurs, les styles sont généralement écrits dans un format de fichier spécifique :
Sass ⇒ *.sass ou *.scss
LESS ⇒ *.less
Pour tirer parti de la puissance des préprocesseurs, tout en les maintenant couplés à votre composant, vous pouvez utiliser la prop lang.
Après avoir configuré votre application Vue CLI avec le bon préprocesseur (comme nous l'avions fait dans la partie précédente), il suffit de passer la prop lang au bloc de style. Assurez-vous de bien mettre le préprocesseur souhaité, ici scss.
<template>
...
</template>
<script>
...
</script>
<style lang="scss">
.button {
&.is-small { ... }
&.is-large { ... }
}
</style>Maintenant, vous avez le pouvoir des préprocesseurs CSS entre vos mains. ⚡️💪
Gérez le CSS
Un grand pouvoir implique de grandes responsabilités. Pour comprendre comment gérer votre CSS, il faut comprendre de quelle façon style est compilé en production.
Gérez le style global par défaut
Lorsque style ne comporte aucune configuration additionnelle, les styles sont appliqués de manière générale, à chaque fois que le composant est rendu.
Donc, si notre composant ressemble à ce qui suit :
<template>
<main>
<h1>Bonjour</h1>
<button>Cliquez ici!</button>
</main>
</template>
<script>
export default {
name: 'HomePage'
}
</script>
<style>
button {
background-color: blue;
}
</style>...l'HTML correspondant devrait ressembler à cela :
<html>
<head>
<style>
button {
background-color: blue;
}
</style>
</head>
<body>
<main>
<h1>Bonjour</h1>
<button> Cliquez ici !</button>
</main>
</body>
</html>hUtilisez des styles délimités
La technique des styles délimités (scoped styles) est devenue populaire récemment. Elle permet de fournir un attribut scoped au bloc de style, afin que le CSS ne s'applique qu'aux éléments du composant courant. Pour ce faire, un attribut data personnalisé est ajouté à la classe CSS et à l'élément HTML, afin que les styles restent « scopés », donc délimités. Grâce à cela, les effets de cascade sont minimisés en limitant leur périmètre d'action.
Cependant, cela n'empêchera pas les styles plus spécifiques de prendre le dessus si quelqu'un écrit des sélecteurs génériques plus spécifiques. Il est donc très important d'utiliser de bonnes techniques d'architecture CSS !
Avant le build
<style scoped>
.example {
color: red;
}
</style>
<template>
<div class="exemple">hello !</div>
</template>Après le build
<style>
.example[data-v-f3f3eg9] {
color: red;
}
</style>
<template>
<div class="exemple" data-v-f3f3eg9>hello !</div>
</template>Ajoutez des modules CSS
Bien que la technique des scoped styles puisse être efficace pour certains cas, l'un de ses principaux inconvénients vient du fait qu'elle peut être affectée par des styles présentant une plus grande spécificité. Ce n'est généralement pas un problème important pour la plupart des styles, mais cela peut devenir problématique lorsque des CSS tierces s'ajoutent et que des éléments comme .button sont courants.
Les modules CSS sont appréciés pour les possibilités de modularité et de composition de CSS offertes, comme illustré ci-dessous :
<style module>
.red {
color: red;
}
.bold {
font-weight: bold;
}
</style>Comme pour les styles délimités, vous n'avez qu'à ajouter un attribut module à <style> et il ajoutera vos styles avec un hash aléatoire par défaut.
<style>
.red-vj29193 {
color: red;
}
.bold-vj2914 {
font-weight: bold;
}
</style>Cependant, l'utilisation des modules CSS nécessite d'ajouter la classe CSS avec le style $ dans une classe v-bind:class.
<template>
<h1 :class="$style.red">Mon titre en rouge</h1>
</template>
<style module>
.red {
color: red;
}
</style>Même s'il faut s'habituer à la syntaxe, les avantages des modules CSS l'emportent souvent sur le temps nécessaire à l'intégration de la nouvelle façon d'écrire les classes. Cependant, si vous ou votre équipe n'avez pas besoin de modules CSS, vous n'avez pas à vous soucier du tout de cette nouvelle syntaxe.
Découvrez des stratégies pour gérer les styles de votre application
Maintenez vos styles couplés à votre composant
En gardant vos styles au bas niveau, vous vous assurez que les futurs développeurs connaîtront le contexte dans lequel le style a été créé. Cela vous évite de passer un temps considérable à essayer de créer un design system ultra perfectionné. L'avantage, c'est que cela permet d'améliorer la maintenabilité à long terme de votre application, tout en tirant parti du découpage du code fourni par Vue.
Par exemple, en langage CSS traditionnel, vous pourriez écrire les styles de votre bouton comme suit :
style.css
.button {
background-color: blue;
color: white;
border-radius: 10px;
}Cependant, même s'il ne s'agit que d'une seule classe CSS, imaginez ce qui se passerait s'il y avait encore plus de styles. Cela signifie que les utilisateurs téléchargeraient toutes ces données, qu'ils utilisent les styles ou non. De plus, cela ne simplifie pas les choses lorsque l'on travaille avec du code existant, car il est difficile de refactoriser sans connaître les effets de bord possibles.
En revanche, si nous gérions nos styles avec Vue...
src/components/CustomButton.vue
<template>
<button class="button">{{ text }}</button>
</template>
<script>
export default {
name: 'CustomButton',
props: ['text']
}
</script>
<style>
.button {
background-color: blue;
color: white;
border-radius: 10px;
}
</style>N'importe quel développeur peut comprendre avec facilité la façon dont le code est lié, les effets de bord ne constituent plus vraiment un sujet de préoccupation. C'est pratique, n'est-ce pas ?
Ne généralisez les styles que lorsque vous avez un cas de réutilisation
Il peut être tentant de tester et de s'en tenir aux méthodes traditionnelles de CSS, en mettant tous les styles dans un fichier CSS partagé. Mais ce n'est pas forcément une bonne idée. 😑 En effet, ce fichier ne peut pas être parsé de manière intelligente lorsque l'utilisateur visite une page. Donc, à moins que vous ne voyiez un grand nombre de réutilisations de styles à travers différents composants, ma recommandation générale est de ne pas les extraire dans un fichier CSS générique, mais de s'en tenir au style composant par composant.
Entraînez-vous
Vous trouverez le code source des exercices dans le repo GitHub du cours dans le dossier cafe-with-a-view. Pour commencer, consultez la branche P3C1-Begin.
Instructions
Migrez tous les styles des sites statiques styles.css dans les fichiers des composants respectifs.
Utilisez votre préprocesseur préféré si vous le souhaitez !
En résumé
Dans ce chapitre, vous avez découvert :
l'utilisation de préprocesseurs dans un composant monofichier ;
les stratégies de gestion des styles avec les scoped styles ;
les stratégies de gestion des styles avec les CSS Modules ;
les stratégies de gestion des styles au fur et à mesure que vous créez des composants.
Dans le chapitre suivant, nous nous pencherons encore davantage sur la façon dont les composants peuvent communiquer entre eux.
