Styling dans les applications Web modernes

Si vous cherchez à styliser les applications pour le Web, vous découvrirez de nombreuses approches et bibliothèques. , certains changeant même de jour en jour. Bloc modificateur d'élément (BEM); pré-processeurs tels que Less et SCSS; Les bibliothèques CSS-in-JS, y compris JSS et les composants stylés; et, dernièrement, les systèmes de conception. Vous les rencontrez dans des articles, des blogs, des tutoriels, des débats et, bien sûr, des débats sur Twitter.

Comment choisir entre eux? Pourquoi tant d'approches existent-elles en premier lieu? Si vous êtes déjà à l'aise avec une méthode, pourquoi envisager même de passer à une autre?

Dans cet article, je vais vous présenter les outils que j'ai utilisés pour les applications de production et les sites sur lesquels j'ai travaillé. caractéristiques de ce que j'ai réellement rencontré plutôt que de résumer le contenu de leurs readmes. Ceci est mon parcours à travers BEM SCSS, styled-composants et systèmes de conception en particulier; mais notez que même si vous utilisez différentes bibliothèques, les principes de base et l'approche restent les mêmes pour chacune d'entre elles.

CSS Back In The Day

Lorsque les sites Web commençaient à devenir populaires, le CSS était principalement utilisé pour ajouter des designs funky à attirer l'attention de l'utilisateur, par exemple des panneaux publicitaires au néon dans une rue animée:

Son utilisation n'était pas pour la mise en page, le dimensionnement, ni aucun des besoins de base pour lesquels nous utilisons couramment le CSS pour aujourd'hui, mais en tant qu'add-on facultatif pour rendre les choses fantaisistes et attrayantes. contagieux. Au fur et à mesure de l'ajout de fonctionnalités au CSS, de nouveaux navigateurs prenant en charge une toute nouvelle gamme de fonctionnalités et de fonctionnalités sont apparus et la norme pour les sites Web et les interfaces utilisateur a évolué – CSS est devenu un élément essentiel du développement Web.

Il est rare de trouver des sites Web sans un minimum. de quelques centaines de lignes de style personnalisé ou d'un framework CSS (du moins, les sites qui ne paraissent pas génériques ou obsolètes):

Ce qui a suivi est assez prévisible. La complexité des interfaces utilisateur n'a cessé de croître, parallèlement à l'utilisation de CSS. mais sans directives suggérées et avec beaucoup de souplesse, le style est devenu compliqué et sale. Les développeurs avaient leurs propres façons de faire les choses, avec pour objectif final de faire en sorte que les choses ressemblent à ce que le design était censé être.

Cela a conduit à un certain nombre de problèmes communs auxquels de nombreux développeurs ont été confrontés. , comme gérer de grandes équipes sur un projet ou maintenir un projet sur une longue période sans avoir de guides clairs. Malheureusement, même maintenant, l'une des principales raisons est que CSS est toujours considéré comme peu important et qu'il ne vaut pas la peine d'y prêter beaucoup d'attention.

Le CSS n'est pas facile à gérer

Rien n'est intégré dans CSS pour la maintenance et la gestion. En ce qui concerne les grands projets avec des équipes, les problèmes courants rencontrés avec CSS sont les suivants:

• Le manque de structure de code ou de normes réduit considérablement la lisibilité;
• La maintenabilité à mesure que la taille du projet augmente;
• Les problèmes de spécificité dus au code non être lisible en premier lieu.

Si vous avez travaillé avec Bootstrap, vous aurez remarqué que vous ne pouvez pas remplacer les styles par défaut et vous avez peut-être résolu le problème en ajoutant ! important ou en considérant la spécificité des sélecteurs. Pensez aux feuilles de style d’un grand projet, avec leur grand nombre de classes et de styles appliqués à chaque élément. Travailler avec Bootstrap serait bien car il contient une excellente documentation et vise à être utilisé comme un cadre solide pour le style. Ce ne sera évidemment pas le cas pour la plupart des feuilles de style internes, et vous serez perdu dans un monde de styles en cascade.

Dans les projets, cela équivaudrait à quelques milliers de lignes de CSS dans un seul fichier, avec des commentaires. si tu es chanceux. Vous pouvez également voir un couple de ! Important utilisé pour que certains styles fonctionnent finalement mieux que d’autres.

Vous avez peut-être rencontré des problèmes de spécificité, mais vous n'avez pas compris comment fonctionne cette spécificité. Jetons un coup d'oeil.

Lequel des styles appliqués au même élément serait appliqué à l'image de droite, en supposant qu'ils le désignent tous les deux?

Quel est l'ordre de poids des sélecteurs tels que les styles en ligne, les ID, les classes, les attributs et les éléments? Ok, j’ai rendu la tâche facile, elles sont classées par ordre de poids:

Commencez à 0 ; ajoutez 1 000 pour un attribut de style; add 100 pour chaque id ; add 10 pour chaque attribut, classe ou pseudo-classe; add 1 pour chaque nom d'élément ou pseudo-élément

Ainsi, par exemple, en prenant l'exemple ci-dessus:

Voyez-vous pourquoi le deuxième exemple était la bonne réponse? Le sélecteur id a clairement beaucoup plus de poids que les sélecteurs d'éléments. C’est essentiellement la raison pour laquelle votre règle CSS ne semble parfois pas s’appliquer. Vous trouverez des informations détaillées à ce sujet dans l’article de Vitaly Friedman, « Spécificité CSS: Ce que vous devez savoir ».

Plus le code est grand, plus le nombre de classes est important. Celles-ci peuvent même s'appliquer ou remplacer différents styles en fonction de la spécificité, ce qui vous permet de voir à quelle vitesse cela peut devenir difficile à gérer. De plus, nous traitons de la structure et de la maintenabilité du code: c’est la même chose que le code dans n’importe quelle langue. Nous avons la conception atomique, des composants Web, des moteurs de templates; CSS a besoin de la même chose et nous avons donc plusieurs approches différentes qui tentent de résoudre ces différents problèmes.

Le module de modification d'élément en bloc (BEM)

«BEM est une méthodologie de conception qui vous aide à: créez des composants réutilisables et un partage de code dans le développement front-end. ”

– getbem.com

L'idée de BEM est de créer des composants à partir de parties d'applications qui sont réutilisées ou qui sont indépendantes. En plongeant, le processus de conception est similaire à la conception atomique: modularisez les éléments et considérez chacun d’eux comme un composant réutilisable.

J’ai choisi de commencer par gérer les styles avec BEM car c’était très similaire à la manière dont React familier avec) décompose les applications en composants réutilisables.

Utilisation de BEM

BEM n’est rien de plus qu’un guide: pas de nouveau cadre ou langage à apprendre, juste du CSS avec une convention de nommage pour mieux organiser les choses. En suivant cette méthodologie, vous pouvez implémenter les modèles que vous avez déjà utilisés, mais de manière plus structurée. Vous pouvez également très facilement apporter des améliorations progressives à votre base de code existante, car elle ne nécessite aucune configuration d'outillage supplémentaire ni aucune complexité supplémentaire.

Avantages

• Au cœur de son fonctionnement, BEM gère les composants réutilisables, empêchant ainsi les styles globaux aléatoires de remplacer les autres. Au final, nous avons un code plus prévisible, ce qui résout beaucoup de nos problèmes de spécificité.
• Il n’ya pas beaucoup de courbe d’apprentissage; c’est toujours le même vieux CSS avec quelques guides pour améliorer la maintenabilité. C'est un moyen facile de rendre le code modulaire en utilisant CSS lui-même.

Inconvénients

• Tout en favorisant la réutilisabilité et la maintenabilité, un effet secondaire du principe de dénomination BEM rend la dénomination des classes difficile et fastidieuse. plus votre composant est imbriqué dans le bloc, plus les noms de classe deviennent lus et illisibles. Les sélecteurs profondément imbriqués ou les petits-enfants sont souvent confrontés à ce problème.

  
 Lorem ipsum lorem 
  

    
     Link 
  

Ce n’est qu’un rapide aperçu de BEM et de la façon dont il résout nos problèmes. Si vous souhaitez approfondir sa mise en œuvre, consultez « BEM For Beginners » publié ici dans Smashing Magazine.

Sassy CSS (SCSS)

En clair, SCSS est CSS sur les stéroïdes. Des fonctionnalités supplémentaires, telles que des variables, des sélecteurs d'imbrication, des mixins réutilisables et des importations, aident SCSS à transformer le CSS en langage de programmation. Pour moi, SCSS était assez facile à prendre en main (consultez les documents si vous ne l'avez pas déjà fait) et une fois que je me suis familiarisé avec les fonctionnalités supplémentaires, je préférerais toujours l'utiliser au-dessus de CSS pour la commodité qu'il a fournie. SCSS est un préprocesseur, ce qui signifie que le résultat compilé est un ancien fichier CSS pur. la seule chose à configurer est de créer un outil permettant de compiler en CSS dans le processus de construction.

Des fonctionnalités très pratiques

• Les importations vous aident à fractionner les feuilles de style en plusieurs fichiers pour chaque composant / section, ou ce qui facilite la lisibilité.

 // main.scss
@import "_variables.scss";
@import "_mixins.scss";

@import "_global.scss";
@import "_navbar.scss";
@import "_hero.scss";

• Mixins boucles et variables aident à appliquer le principe DRY et facilitent également l'écriture de CSS.

 @mixin flex-center ($ direction ) {
  affichage: flex;
  align-items: centre;
  justifier-contenu: centre;
  flex-direction: $ direction;
}

.boîte {
  @include flex-center (rangée);
}

Note : SCSS mixin: Découvrez d'autres fonctions SCSS plus pratiques sur ici .

• L'imbrication de sélecteurs améliore la lisibilité, car elle fonctionne de la même manière que les éléments HTML sont disposés : de manière imbriquée. Cette approche vous aide à reconnaître la hiérarchie en un coup d'œil.

BEM avec SCSS

Il est possible de regrouper le code des composants en blocs, ce qui améliore considérablement la lisibilité et facilite l'écriture de BEM avec SCSS:

Note : Pour en savoir plus sur le fonctionnement de cette opération, consultez le tutoriel « BEM with Sass de Victor Jeman.

Styled-Components

Il s'agit de l'une des bibliothèques CSS-in-JS les plus utilisées. Sans approuver cette bibliothèque en particulier, cela a bien fonctionné pour moi et j’ai trouvé ses fonctionnalités très utiles pour mes besoins. Prenez votre temps pour explorer d'autres bibliothèques et choisissez celle qui correspond le mieux à vos besoins.

J'ai pensé qu'un bon moyen de connaître les composants stylés consistait à comparer le code avec du CSS pur. Voici un aperçu de la façon d’utiliser les composants stylés et de ce qui le concerne:

Au lieu d’ajouter des classes aux éléments, chaque élément avec une classe est transformé en composant. Le code semble plus net que les noms de classe longs que nous avons avec BEM.

Il est intéressant de noter que ce que font les composants stylés sous le capot consiste à ajouter des classes pertinentes aux éléments conformément à ce qui est spécifié. C’est essentiellement ce que nous faisons dans les feuilles de style (à noter que cela n’a aucun rapport avec le style en ligne).

 importé à partir de 'styled-components';
    
const Button = styled.button`
  couleur de fond: palevioletred;
  couleur: papayawhip;
`;

// sortie

Note : Composants stylés sous le capot: pour en savoir plus sur le style inline vs CSS-in-JS dans « Écrire vos styles dans JS écrire des styles inline » de Max Stoiber .

Pourquoi les composants stylés font-ils partie des bibliothèques CSS-In-JS les plus utilisées?

Pour le style, nous utilisons simplement des littéraux de modèle avec une syntaxe CSS normale. Cela vous permet d'utiliser toute la puissance de JavaScript pour gérer le style à votre place: conditions, propriétés passées en tant qu'arguments (en utilisant une approche similaire à React), et essentiellement toutes les fonctionnalités pouvant être implémentées par JavaScript.

While SCSS comporte des variables, des mixins, des fonctions d'imbrication et d'autres fonctionnalités, les composants stylés ne font qu'ajouter, ce qui le rend encore plus puissant. Son approche, fortement basée sur des composants, peut sembler décourageante au premier abord car elle est différente du CSS traditionnel. Cependant, au fur et à mesure que vous vous habituerez aux principes et aux techniques, vous remarquerez que tout ce qui est possible avec SCSS peut être réalisé dans des composants stylés, ainsi que dans de nombreux autres domaines. Vous utilisez simplement JavaScript à la place.

 const getDimensions = size => {
  commutateur (taille) {
    cas 'petit': retour 32;
    cas 'grand': retour 64;
    défaut: return 48;
  }
}

const Avatar = styled.img`
  rayon de bordure: 50%;
  width: $ {props => getDimensions (props.size)} px;
  hauteur: $ {props => getDimensions (props.size)} px;
`;

const AvatarComponent = ({src}) => (
  
)

Note : Les littéraux de modèle dans les composants stylisés vous permettent d'utiliser JS directement pour le style conditionnel et plus encore.

Il convient également de noter à quel point cela s'intègre parfaitement dans le monde des composants Web. . Un composant React a sa propre fonctionnalité avec JavaScript, un modèle JSX et maintenant CSS-in-JS pour le style: il est entièrement fonctionnel tout seul et gère tout ce qui est nécessaire en interne.

Sans nous en rendre compte, c’était la solution à un problème Je parle depuis trop longtemps: la spécificité. Alors que BEM était un guide pour appliquer une structure à base de composants pour les éléments et les styles, mais s'appuyant toujours sur des classes, les composants stylés vous l'imposent.

Les composants stylés possèdent quelques fonctionnalités supplémentaires que j'ai trouvées particulièrement utiles: les thèmes, qui peut configurer une prop globale (variable) transmise à chaque composant stylé; préfixage automatique du vendeur; et le nettoyage automatique du code inutilisé. Cette communauté extrêmement active et active n’est que la cerise sur le gâteau.

Remarque : Il reste encore beaucoup à découvrir et à exploiter. Pour en savoir plus, consultez les documents styled-components

. Fonctions de récapitulation rapide

• Les littéraux de modèle sont utilisés pour la syntaxe, comme pour les CSS classiques.
• Il impose une conception modulaire.
• résout les problèmes de spécificité en gérant les noms de classe pour vous.
• Tout ce qui peut être fait avec SCSS et plus, mis en œuvre avec JS.

Pourquoi ce ne serait peut-être pas pour vous

• Cela repose évidemment sur JavaScript, ce qui signifie sans lui les styles ne se chargent pas, ce qui engendre un désordre encombré.
• Les noms de classes lisibles auparavant sont remplacés par des hachages qui n'ont vraiment aucune signification.
• Le concept de composants plutôt que celui de classes en cascade peut être un peu difficile à comprendre.

Design Systems

À mesure que l’utilisation des composants Web augmente, ainsi que la nécessité de la conception atomique (décomposer l’assurance chômage en fonctions de base). blocs de construction), de nombreuses entreprises choisissent créer des bibliothèques de composants et des systèmes de conception. Contrairement aux technologies ou approches sur la gestion du style mentionnées ci-dessus, les systèmes de conception représentent une approche organisationnelle de la gestion des composants et une conception cohérente sur l'ensemble des plateformes ou des applications.

Il est possible d'utiliser une approche dont nous avons parlé dans un système de conception pour organiser styles, tandis que le système de conception lui-même se concentre sur les éléments constitutifs des applications plutôt que sur des implémentations internes.

"Les systèmes de conception sont essentiellement des ensembles de règles, de contraintes et de principes mis en œuvre dans la conception et le code."

Systèmes de conception et composants Les bibliothèques s'adressent à des écosystèmes entiers, couvrant différentes plates-formes et supports, et peuvent déterminer les perspectives générales de l'entreprise elle-même.

«Un système de conception est un amalgame de style, de composants et de voix.»

Grand aperçu )

Une fois qu'elles ont pris de l'ampleur, les entreprises de haute technologie doivent parfois Le temps passe très vite, et les équipes de conception et de développement peuvent avoir du mal à suivre. Différentes applications, nouvelles fonctionnalités et nouveaux flux, réévaluation constante, modifications et améliorations doivent être expédiées aussi rapidement que possible lorsque l'entreprise en a besoin.

Prenons le cas d'un modal simple; Par exemple, un écran a un mode de confirmation qui accepte simplement une action négative ou positive. Le développeur A s’occupe de cette tâche. Ensuite, l’équipe de conception fournit un autre écran comportant un modal comprenant un petit formulaire avec quelques entrées – le développeur B en tient compte. Les développeurs A et B travaillent séparément et n'ont aucune idée que les deux travaillent sur le même modèle, construisant deux composants différents qui sont essentiellement les mêmes au niveau de base. Si différents développeurs travaillaient sur les différents écrans, nous pourrions même constater des incohérences d'interface utilisateur dans le code.

Imaginons maintenant une grande entreprise composée de plusieurs concepteurs et développeurs – vous pourriez vous retrouver avec toute une collection de composants et de flux supposés être.

Le principe essentiel des systèmes de conception est de contribuer à répondre aux exigences de l'entreprise: créer et livrer de nouvelles fonctionnalités et fonctionnalités, voire des applications complètes, tout en respectant les normes, la qualité et la cohérence de la conception. 19659005] Voici quelques exemples de systèmes de conception courants:

En ce qui concerne le style, nous nous intéresserions plus particulièrement à la partie bibliothèque de composants, bien que le système de conception lui-même soit bien plus qu'un ensemble de composants. Un composant gère sa fonctionnalité, son modèle et son style en interne. Un développeur travaillant sur l'application n'a pas besoin de connaître tout le fonctionnement interne des composants, mais doit juste savoir comment les assembler dans l'application.

Imaginez maintenant quelques-uns de ces composants fabriqués ultérieurement. réutilisable et maintenable, puis organisé dans une bibliothèque. Développer des applications peut être presque aussi simple que glisser-déposer (enfin, pas exactement, mais un composant peut être importé sans se soucier des aspects internes de son fonctionnement). C’est essentiellement ce que fait une bibliothèque de composants.

Pourquoi vous voudrez peut-être envisager de créer un système de design [19659041] Comme mentionné précédemment, il aide les équipes d'ingénierie et de conception à faire face à l'évolution rapide des besoins de l'entreprise tout en maintenant les normes et la qualité.

Pourquoi ce n'est peut-être pas ce qu'il y a de mieux pour vous

• Les systèmes de conception nécessitent beaucoup de temps et d'efforts pour planifier et organiser les choses à partir de zéro – à la fois en termes de code et de conception. Si cela n’est pas vraiment nécessaire, il ne vaut peut-être pas la peine de retarder le processus de développement pour se concentrer au départ sur le système de conception.
• Si un projet est relativement petit, un système de conception peut ajouter une complexité inutile et aboutir à une perte de temps en efforts. En fait, il fallait juste quelques normes ou directives pour assurer la cohérence. Étant donné que plusieurs entreprises de premier plan ont adopté des systèmes de conception, le battage publicitaire peut inciter les développeurs à penser que cette approche est toujours la meilleure, sans analyser les exigences et en garantir le caractère pratique.

Conclusion

Les applications de coiffage constituent un monde en soi, auquel on ne prête pas souvent l'attention et l'importance qu'il mérite. Avec des interfaces utilisateur modernes et complexes, il ne faut que peu de temps avant que votre application devienne un fouillis de styles non ordonnés, ce qui réduit la cohérence et rend plus difficile l'ajout de nouveau code ou la modification de la base de code existante.

Distiller ce que nous avons discuté Jusqu'ici: BEM, avec SCSS, pourrait vous aider à mieux organiser vos feuilles de style, à adopter une approche de programmation en CSS et à créer des noms de classe structurés et significatifs pour un code plus propre avec une configuration minimale. En vous basant sur une infrastructure frontale telle que React ou Vue, vous trouverez peut-être plus pratique de donner le nom de classe à une bibliothèque CSS-in-JS si vous êtes à l'aise avec une approche basée sur les composants, mettant fin à tous vos problèmes de spécificité. , avec quelques autres avantages. Pour les applications plus grandes et les plates-formes multiples, vous pouvez même envisager de construire un système de conception en combinaison avec l'une des autres méthodes, afin d'optimiser les vitesses de développement tout en maintenant la cohérence.

Essentiellement, en fonction de vos besoins et de la taille et de la taille de votre logiciel, il est important de prendre le temps de déterminer votre meilleure approche en matière de style.

(dm, og, yk, il)