Avec toutes les discussions récentes sur le fait de pouvoir enfin utiliser CSS Grid, cela m'a fait réfléchir: Quelles autres fonctionnalités CSS incroyables puis-je utiliser maintenant? Les variables CSS ont été celles qui sont instantanément apparues.
Cela fait un moment que je n'ai rien entendu à propos des variables CSS et cela ajoute un nouvel ensemble d'outils et une nouvelle façon de penser au développement frontal qui me passionne.
Les variables CSS se sont effondrées depuis quelques années mais ne semblent pas être très répandues. Avec la popularité des pré-processeurs tels que Sass, les développeurs frontaux ont fait disparaître cette variable depuis longtemps.
J'ai été excité pour la première fois par les variables CSS vers 2014 et depuis lors, ils sont entrés et sortent de ma sphère d'intérêt. Je ne pense qu'à les intégrer dans les sites de production et je vais vous montrer à quel point ils sont simples et faciles à utiliser.
Déclarer la propriété personnalisée est simple: il suffit de créer la propriété souhaitée et d'ajouter deux tirets au début. Celles-ci peuvent être déclarées n'importe où mais les ajouter à: root semble être une bonne approche pour le moment.
--my-reusable-value: 20px;L'utilisation de la propriété est également très simple. Nous y accédons via la fonction var () et utilisons la propriété que nous avons déclarée ci-dessus.
padding: var(--my-reusable-value);N'est-ce pas simple et glorieux?
Les variables CSS sont simples à utiliser et faciles à mémoriser. Le plus grand défi avec les variables CSS (comme avec la plupart des CSS) est de connaître le bon moment et le bon endroit pour les utiliser. Les jeter au hasard est un moyen sûr de créer un désordre dans une feuille de style et avec ces variables lancées dans le débogage deviendra probablement plus difficile.
Les cas d'utilisation appropriés et les stratégies pour les utiliser doivent être pris en compte et c'est là que la majorité de vos efforts doivent être concentrés.
Dans l'exemple suivant, je vais vous montrer un exemple de base de la façon dont je construis actuellement un composant réactif à l'aide des variables Sass. Ensuite, je vous montrerai comment améliorer les variables CSS de manière impossible avec un pré-processeur. Il s’agit d’un cas d’utilisation spécifique qui ne s’applique pas à toutes les manières dont les variables sont utilisées, mais montre comment les variables CSS peuvent être utilisées différemment.
Voir le stylo Variables CSS - Cas d'utilisation réactive sans les variables CSS par Adam Hughes ( @lostmybrain ) sur CodePen .
En utilisant Sass, j'ai essayé plusieurs méthodes différentes. Ma version actuelle est de placer des requêtes multimédia dans les blocs CSS que je veux modifier. Ici, je peux utiliser une variable, un standard CSS, un mixin ou une extension pour modifier cet élément sans disperser les styles du composant partout.
Un problème avec cela est d'avoir plusieurs requêtes de médias et beaucoup de variables qui sont en quelque sorte liées, mais pas. Je pourrais utiliser des cartes pour les variables qui donneraient plus d'organisation mais je pense que le principal problème est que nous utilisons plusieurs variables pour définir une propriété. Cela semble juste mal.
Les variables SASS sont utilisées à l'avance, ce qui signifie que nous devons planifier chaque manière de les utiliser. Ils facilitent le développement, mais techniquement, ils ne nous fournissent pas de nouveaux pouvoirs.
Voir le stylo Variables CSS - cas d'utilisation réactif par Adam Hughes ( @lostmybrain ) sur CodePen .
Les variables CSS n'ont pas besoin d'être déclarées à l'avance, elles sont dynamiques. Ceci est utile d'une manière très différente. Nous pouvons maintenant modifier conditionnellement les variables de n'importe où et dans des contextes spécifiques tels que les requêtes de médias.
En servant nos styles d'interrogation de médias directement, nous pouvons réduire le nombre de requêtes diffusées dans les médias pour un style réactif. Il offre également une manière très agréable et propre de voir l'espacement général et le style de typographie à travers différents formats.
Je pense que les conceptions et les thèmes réactifs sont deux excellents cas d'utilisation pour les variables CSS, mais il y a tellement de possibilités.
Les variables Sass et les variables CSS sont deux bêtes différentes, chacune ayant ses propres avantages et inconvénients.
En raison de la popularité de Sass et de la nature plus programmatique de Sass, des schémas d'organisation plus approfondis ont évolué avec le temps. J'aime particulièrement les cartes sass et en combinant des variables de type similaires dans les cartes. Les couleurs, les tailles et les raccourcis des chemins semblent être des choix populaires pour inclure dans les cartes.
En raison de l'utilisation relativement réduite des variables CSS, les meilleures pratiques doivent encore évoluer. Les cartes et les tableaux ne sont pas possibles de la même manière en CSS, de sorte que ces nouveaux modèles organisationnels devront innover et résoudre les problèmes de manière différente de Sass.
Les variables CSS sont gérées dynamiquement par le navigateur au moment de l'exécution, tandis que les variables Sass sont utilisées lors de la compilation du CSS.
C'est le principal argument de vente des variables CSS pour moi. Il sera intéressant de voir comment les gens utilisent cette fonctionnalité au fil du temps et si elle sera à la hauteur de son potentiel.
Je suis personnellement d'avis que plus nous pouvons retirer de Webpack , Gulp , et peu importe le nouveau framework , mieux c'est. Avoir de nouvelles fonctionnalités de navigateur intéressantes signifie que nous n'avons pas besoin de recourir à la compilation et aux frameworks JavaScript pour faire ce que les développeurs jugent essentiel. J'imagine qu'un pourcentage élevé de développeurs frontend utilise des variables dans leur CSS d'une manière ou d'une autre, de sorte que toute personne utilisant cette fonctionnalité semble être une chose raisonnable à faire. Cela signifie une chose de moins dans l’étape de la construction (ce qui, je pense que nous pouvons tous être d’accord, devient de plus en plus immense) et une plus grande cohérence sur le Web.
Le support est remarquable avec une exception flagrante: IE 11. La plupart des navigateurs modernes prennent en charge les variables CSS avec Edge qui ont quelques bogues.
À 78,11%, c'est plus élevé que CSS Grid (au moment de la rédaction) mais que le support IE11 pourrait être un problème.
Je pense que le moment est venu. Cette prise en charge d'IE11 ne va pas s'améliorer, et nous savons par les versions précédentes de Windows que la mise à niveau prend du temps. Mais le support des navigateurs modernes est excellent, ce qui signifie que nous devrions nous tourner vers les variables CSS et expérimenter les possibilités.
Cela ne signifie pas que nous ne devons pas oublier notre responsabilité vis-à-vis du support de navigateur plus ancien. Un système de secours de base utilisant une balise de support, ou même un polyfill, pour les navigateurs plus anciens devrait être envisagé, d'autant plus si votre utilisation réelle du site est beaucoup plus biaisée pour les anciens navigateurs.
C'est une période passionnante pour le développement frontal, et je suis impatient d'utiliser davantage de ces technologies sur mes sites de production.