Couper le SASS: comment utiliser les styles JavaScript en ligne pour tout.

Aujourd'hui, le développement Web frontal consiste à créer des applications, pas seulement des pages Web. Et bien que CSS et SASS fussent tous les deux parfaits pour les pages de style, ils ne sont pas bien adaptés aux applications de style. Cela est particulièrement vrai si vous construisez avec une stratégie à base de composants.

Une stratégie basée sur les composants consiste à décomposer votre application en petits blocs de construction réutilisables appelés composants. L'utilisation de composants pour créer votre application peut apporter réutilisabilité, clarté et efficacité à votre front-end.

Pour tirer pleinement parti d'une approche basée sur les composants, nous souhaitons des composants qui encapsulent entièrement les fonctions, les balises et les styles.

Dans cet article, nous verrons en quoi l'écriture de styles à l'aide de JavaScript intégré est un excellent moyen de prendre en charge le développement par composant. En fin de compte, nous aurons des composants frontaux qui sont un fichier unique, facilement partageables et entièrement autonomes.

Ecrire vos styles dans JS est un grand changement, je veux donc prendre un peu de temps pour expliquer pourquoi nous voudrions le faire. Je crois au choix du bon outil pour le bon travail. SASS était certainement le bon outil pour son époque, offrant de grands avantages tels que:

  • Nidification
  • Variables
  • Mixins

L'imbrication était un avantage considérable, car elle permettait à vos styles de refléter votre marge bénéficiaire. Si tu avais:

Vous pourriez faire:

Cet avantage n'est plus aussi utile. Nous sommes toujours très intéressés par le fait que nos styles reflètent notre balisage, mais notre balisage a changé!

Aujourd'hui, en utilisant une approche à base de composants, nous préférons les séparer en deux composants distincts appelés `UserList` et` User`. Le résultat est deux fichiers, où `UserList` contiendrait une série répétée de` User`.

Puisque nous divisons notre application en composants, nous devrions écrire nos styles en utilisant la même stratégie. Cela signifie que nous devrions essayer de co-localiser nos styles avec le balisage de notre composant afin qu’ils soient encapsulés ensemble.

Une façon d'accomplir cela consiste à utiliser des styles inline, comme ceux d'antan avant les feuilles de style en cascade.

Cette méthode classique est très bien alignée sur une approche par composants. Nous ne l’utiliserons pas, car c’est très contraignant, mais cela démontre les principes que nous recherchons dans une solution de style moderne.

Variables et Mixins

Nous avons parlé de l’imbrication de SASS, qu’en est-il des autres gros avantages - les variables et les mixins?

Eh bien, il se trouve qu'il existe une autre solution très populaire pour ceux-ci - JavaScript!

Ne serait-il pas formidable de pouvoir utiliser les fonctionnalités naturelles de JavaScript pour `var` et` function` afin de nous donner ce dont nous avons besoin dans une solution de style? Si nous utilisons JavaScript pour écrire nos styles, nous acquérons la flexibilité, le pouvoir et la familiarité que nous aimons avec JS. Plus! L'ensemble de notre composant peut être composé dans une seule langue! Et même un seul fichier!

Nos buts

Voici ce que nous voulons faire:

  • Composez nos styles directement à côté du balisage
  • Variables `import` et` export` comme les couleurs ou les points d'arrêt
  • Écrire des styles «dynamiques» en fonction de l'état (menu ouvert / fermé, etc.)

Voici quelques exigences supplémentaires:

  • Doit couvrir des pseudo-états comme `: hover,: before,: after`
  • Doit prendre en charge directement les requêtes multimédia telles que `@media (max-width: 600px)`
  • Autoriser les fonctions / ternaires (voir dynamique ci-dessus)

Note latérale: expliquant la différence entre les «styles JS» et «CSS dans JS»

Il y a deux approches distinctes:

  • Vous pouvez inclure CSS dans votre JS
  • Vous pouvez écrire votre CSS en utilisant JS

Je préfère la deuxième méthode et c’est ce que nous allons couvrir ici.

Pour la première approche, les modules CSS sont une solution populaire dans la catégorie «écrire CSS dans votre JS». Il étend, ou name-spaces, le CSS habituel que vous écrivez dans le `

` d'un composant. L'espacement des noms est quelque chose que vous pouvez faire manuellement avec des classes ou des identifiants, et ce n'est pas une raison suffisante pour utiliser quelque chose comme ceci seul. Pour le support variable ou les mixins, vous devez utiliser un «améliorateur» CSS tel que PostCSS ou SASS avec des modules CSS.

Encore une fois, nous voulons pouvoir utiliser JavaScript pour les fonctionnalités de langage, y compris les variables, les ternaires ou les fonctions. Si notre solution nous oblige à écrire une sorte de CSS «amélioré» au lieu de JS, cela ne fonctionnera pas pour nos besoins.

De nombreuses solutions css-in-js sont disponibles pour les deux approches. Vérifiez-les! Pour le moment, nous allons mettre en œuvre ce que j’ai trouvé qui fonctionne le mieux pour résoudre nos objectifs et nos exigences.

Commençons!

Nous allons utiliser:

  • ES6 transformé par Babel
  • Réagissez pour rendre notre balisage
  • Aphrodite pour créer CSS à partir de JS nous écrivons.

Tout d’abord, nous allons créer un composant simple, appelé UserMenu. Il aura un petit avatar d’utilisateur et un menu qui s’affiche lorsque vous cliquez dessus.

Vous pouvez l'utiliser sur votre page d'application comme:

Le balisage n’est pas important. C'est juste React, ou même AngularJS, avec un peu de syntaxe ES6 / stateless.

Commençons à coiffer! Commencez par inclure Aphrodite.

Ici, nous importons les fonctions spécifiques dont nous avons besoin d’Aphrodite comme le demande la documentation.

Remarque sur les importations: nous importons des références spécifiques avec la syntaxe `import {bar} de la 'syntaxe foo`. En savoir plus sur la documentation d'importation MDN

Nous avons maintenant écrit un `const styles` et utilisons` StyleSheet.create () `avec notre objet styles à l'intérieur. Ceci est tiré de la documentation d'Aphrodite. Aphrodite injecte une balise `