Quelle est la question?
Bonjour à tous, aujourd'hui je souhaite partager avec vous mon expérience personnelle dans l'écriture de styles, ou plus simplement mettre ma vision sur le problème de l'écriture css pour les sites.
Il semblerait qu'à l'ère du développement technologique, où chaque jour nous sommes confrontés à de nouveaux et nouveaux frameworks, préprocesseurs, moteurs de template et autres, aucun problème ne devrait se poser. Les développeurs intelligents ont mis au point un tas de «fonctionnalités» intéressantes pour la commodité de créer des sites puissants et extensibles. Mais comment utiliser correctement ces outils en CSS? Et quelles sont les difficultés?
J'essaierai de répondre à ces questions et à d'autres en suggérant mes méthodes et approches pour résoudre certains problèmes.
Une dure réalité
Ce ne sera un secret pour personne que les développeurs frontaux débutants et expérimentés reçoivent souvent des projets prêts à l'emploi dans lesquels vous devez apporter des modifications, repenser, etc. Dans ma pratique, il y avait beaucoup de telles tâches lorsque vous travaillez avec le code de quelqu'un d'autre, que vous devez approfondir et comprendre. Et si un site prêt à l'emploi est tombé entre vos mains, ouvrez une feuille de style et préparez-vous à voir
plusieurs milliers de lignes de code .
Bien sûr, en tant que développeur expérimenté, vous l'ouvrirez dans une sorte d'IDE, comme Visual Studio Code et avec une légère vague de votre main à travers la fonction de recherche et de remplacement, vous pouvez facilement trouver et réécrire n'importe quelle classe.
Mais si vous devez apporter une quantité décente de modifications en intégrant une partie du nouveau design pour certaines sections, combien de temps allez-vous y
consacrer ?
Je pense
beaucoup . Et tout ce que vous ferez sera légèrement «inutile». Imaginez une situation où le site que vous avez remodelé est transféré à un autre développeur ou après un certain temps, vous êtes invité à y apporter de
nouvelles modifications .
SASS résoudra nos problèmes
Après avoir digéré toutes ces informations, un développeur Web typique dira qu'il est hors de la situation: utilisez des préprocesseurs CSS. Là et modularité et confort et tout.
Bien sûr! Mais tout outil entre les mains d'un programmeur inexpérimenté perd tout son sens. Parfois, vous ouvrez les styles du site et voici le dossier précieux portant le nom «sass». En attendant un miracle le plus souvent, vous n'obtenez que de la déception.
Répartition des styles en fichiers séparés: header.sass, main.sass, animation.sass, etc. Comme c'est "brillant". Et pas efficace. En ouvrant le prochain fichier, vous rencontrez le même groupe de lignes de style.
Quelles sont les alternatives?
Il est préférable de garder le silence sur la façon dont les développeurs appellent parfois leurs classes, ainsi que sur les chaînes d'imbrication des styles. Je pense que tous ceux qui se sont retournés dans ce domaine ont entendu parler de BEM et comprennent l'importance de nommer correctement les classes. Avec cela, cela vaut la peine de commencer
à résoudre tous les problèmes.Je vous propose une approche particulière, une méthodologie particulière pour développer vos styles, mais pas sans l'aide de préprocesseurs. La mise en œuvre de cette méthodologie se déroule en plusieurs étapes:
- La première , comme vous l'avez déjà compris, est la dénomination correcte de vos classes.
- La seconde consiste à se débarrasser des styles d'imbrication. Ici, la méthodologie BEM nous aidera. Après vous être familiarisé avec les bases de cette merveilleuse documentation, vous pouvez passer à la suivante.
- SASS - sans cet outil en aucune façon. C'est lui qui garantit la modularité et la puissance de votre projet.
- Montage du projet. Je pense que vous avez beaucoup entendu parler des assembleurs modernes (il y a beaucoup d'informations sur la construction d'un projet sur Internet). Gulp nous aidera ici .
Maintenant tu es prêt.
Maintenant essentiellement
Dans l'interprétation moderne du frontend, vous pouvez trouver pas mal de frameworks javascript. La plupart d'entre eux divisent le site en parties plus petites, composants. Je vous suggère de faire de même lorsque vous pensez à comment écrire des styles. Chaque bouton, élément de menu, beau lien, image et même texte brut peut être un composant.
Par exemple, sur cette forme d'entrée sur le site, on peut distinguer plusieurs composants:
- Formulaire de connexion lui-même
- Champs de saisie
- Bouton Soumettre
- Case à cocher
Et comme le montre la pratique, en plus du bouton soumettre sur le site, il y aura beaucoup plus de ces boutons et il serait logique de conserver tous les styles pour eux en un seul endroit. On peut en dire autant des champs de saisie, ils peuvent se trouver à différents endroits du site, en répétant leur apparence.
Sur cette base, il sera logique de créer un dossier séparé pour chaque composant et d'y conserver uniquement les styles, ce qui permettra de mettre en œuvre une approche modulaire. Mais ce n'est pas tout.
Composants internes
Comme je l'ai dit, il peut y avoir de nombreux boutons sur un site, avec des couleurs différentes, des retraits différents, tout cela est des données et il est très intelligent de séparer ces données des styles. Ce que je propose de faire.
Je propose de présenter chaque composant sous la forme de trois entités: vars, maker et creater. En termes simples, il s'agit de données, d'un créateur d'actions (méthodes de gestion de ces données) et d'un créateur de styles. Maintenant, tout d'abord.
- Données ou vars. Ceux-ci incluent: la couleur du texte du bouton, la couleur d'arrière-plan du bouton, le remplissage, le rayon de la bordure, la taille de la police, etc. Toutes ces données sont écrites sous forme de variables ou d'un tableau associatif dans un fichier séparé.
- Créateur ou créateur d'actions. Il contient diverses fonctions ou mixins qui prendront les données comme arguments et en généreront des styles.
- Créateur de style ou créateur. En fait, ici, nous importons des données et des méthodes pour nous-mêmes et les lions les uns aux autres selon nos besoins.
Le diagramme suivant montre l'interaction des trois entités.
Est-ce difficile de mettre tout ça dans ta tête? Prenons l'exemple de la création du composant de base d'un bouton - «bouton». Nous utiliserons SCSS comme préprocesseur.
Comme vous l'avez déjà compris, dans le nouveau dossier de boutons, nous créons trois fichiers: _vars.scss, _creater.scss, _maker.scss.
_vars.scss$button_size:( sm:5px 20px, md:15px 20px ); $button_color:( white:#ffffff ); $button_back:( blue: #00e5e5 ); $button_config:( padding:$button_size, color:$button_color, background:$button_back );
Comme nous le voyons, les données sont présentées sous la forme d'un tableau associatif. Tous les styles individuels sont inclus dans l'ensemble principal button_config. Pour créer de nouveaux styles, le développeur n'a besoin que de créer un nouveau tableau, de le remplir avec les valeurs nécessaires et de le connecter à button_config.
_creater.scss: @import "vars"; @import "maker"; .button{ @include InitialComponent($button_config); }
Ici, nous importons les données et le créateur d'actions. Ensuite, via le mixin InitialComponent qui est enregistré dans maker, nous initialisons tous les styles en passant la variable button_config. Et voici la magie. Toutes les classes nécessaires sont créées conformément à la dénomination BM.
Le résultat de l'exécution sera les styles:
.button_padding_sm { padding: 5px 20px; } .button_padding_md { padding: 15px 20px; } .button_color_white { color: #ffffff; } .button_background_blue { background: #00e5e5; }
Et quel est le succès ici?
L'avantage de cette approche ne se fait pas immédiatement sentir. Mais à mesure que le projet se développe, vous comprenez la commodité d'une telle méthodologie. Si vous devez changer la couleur de plusieurs boutons sur différentes pages, vous n'avez pas besoin de rechercher des classes dans un tas de styles. Il suffit d'ouvrir le dossier des boutons et en conséquence le fichier de données et d'y remplacer le style souhaité.
Et si vous avez besoin de créer un nouveau bouton?
Ensuite, c'est encore plus facile, nous écrivons les styles nécessaires dans un tableau déjà préparé ou en créons un nouveau et le connectons là dans la configuration et les classes sont créées.
Tout cela est très pratique, surtout lorsque vous transférez vos composants d'un projet à l'autre et que la vitesse d'écriture des styles augmente plusieurs fois, ne laissant qu'une sensation de confort et de satisfaction que le projet est en ordre.
Cette approche a été testée avec succès sur de nombreux projets et la mise en œuvre de cette méthodologie sera bientôt disponible gratuitement avec une documentation en russe et en anglais.