Méthodes et outils pour développer des styles de page Web

Ne tournons pas autour du pot, avouons-le: le processus d'écriture d'un bon code CSS peut être très, très difficile. De nombreux développeurs ne veulent pas jouer avec les styles. Ils sont prêts à tout, mais pas CSS.



L'auteur du document, dont nous portons aujourd'hui la traduction à votre attention, dit qu'il n'a pas aimé lui-même la partie du développement Web liée au CSS. Mais il n'y a pas moyen de le contourner. De nos jours, une grande attention est accordée à la conception et à ce que l'on appelle "l'expérience utilisateur", mais vous ne pouvez pas vous passer de CSS. Le but de ce matériel est d'aider tout le monde à améliorer ses compétences dans le développement et l'application de styles de page Web.

Problèmes CSS

Au tout début d'un nouveau projet, les styles semblent généralement simples et clairs. Disons qu'il y a très peu de sélecteurs CSS, tels que .title , input , #app , qui ne seront pas difficiles à utiliser.

Mais, à mesure que l'application se développe, les styles se transforment en cauchemar. Le développeur commence à être confus au sujet des sélecteurs CSS. Il découvre qu'il écrit quelque chose comme div#app .list li.item a . Cependant, le travail ne peut pas être arrêté, donc le programmeur continue d'utiliser des constructions similaires, le code CSS est poussé quelque part à la fin du fichier. Et vraiment - qui s'intéresse aux styles? Et le CSS lui-même est tellement absurde ... Le résultat est 500 lignes de CSS complètement non pris en charge, terribles.

J'aimerais que vous lisiez cet article, que vous regardiez vos projets précédents et que vous pensiez: "Eh bien, wow, comment pourrais-je écrire ceci?"

Vous pensez peut-être maintenant que «écrire du CSS» signifie utiliser des frameworks CSS. Après tout, ils visent précisément à faciliter le travail avec les styles, et c'est avec leur utilisation qu'ils écrivent un bon code CSS. Tout cela est vrai, mais les frameworks CSS présentent certains inconvénients:

• Souvent, leur utilisation conduit à l'apparition d'un design ennuyeux, monotone et banal.
• Il est difficile de personnaliser les styles des cadres et la nécessité de faire quelque chose qui dépasse le cadre du cadre peut entraîner des difficultés.
• Le framework, avant de les utiliser, doit être étudié.

Et au final, vous ne lisez pas ceci pour vous familiariser avec un certain cadre? Faisons donc CSS. Je voudrais tout de suite noter que la matière n'est pas sur la façon de créer de beaux designs pour des applications. Il s'agit de savoir comment écrire du CSS de qualité facile à maintenir et comment l'organiser correctement.

SCSS

Dans mes exemples, j'utiliserai SCSS . Il s'agit d'un préprocesseur CSS. En fait, SCSS est un sur-ensemble de CSS. Il a des fonctionnalités très intéressantes, telles que les variables, les constructions imbriquées, l'importation de fichiers, les mixins. Nous discuterons des fonctionnalités SCSS que nous utiliserons.

▍Variables

Dans SCSS, vous pouvez utiliser des variables. Le principal avantage de l'utilisation de variables est la possibilité de leur réutilisation. Imaginez que nous ayons un ensemble de couleurs pour l'application. La couleur principale est le bleu. En conséquence, cette couleur est appliquée littéralement partout. Il est utilisé dans la propriété background-color des boutons, dans la propriété color du titre de la page et dans de nombreux autres endroits.

Et puis, tout à coup, vous décidez de passer du bleu au vert. Si vous effectuez un tel remplacement sans utiliser de variables, vous devrez éditer tout le code, toutes les lignes où l'ancienne couleur est utilisée. Si vous utilisez une variable, vous n'aurez qu'à modifier sa valeur. Voici à quoi ressemble l'utilisation des variables:

 //   $primary-color: #0099ff; //   h1 { color: $primary-color; } 

▍ Constructions imbriquées

SCSS prend en charge les constructions imbriquées. Voici le CSS régulier:

 h1 { font-size: 5rem; color: blue; } h1 span { color: green; } 

Grâce au support des constructions imbriquées, il peut être transformé comme suit:

 h1 { font-size: 5rem; color: blue; span {   color: green; } } 

Cette option est beaucoup plus facile à lire, non? De plus, grâce à l'utilisation de constructions imbriquées, le temps de création de sélecteurs complexes est réduit.

▍Fragmentation et importation

Lorsqu'il s'agit de prendre en charge les styles et leur lisibilité, il devient clair qu'il est impossible de conserver tout le code dans un seul fichier. Un fichier de style peut être utilisé à des fins expérimentales ou lors du développement d'une petite application, mais si vous passez à un niveau professionnel ... il vaut mieux ne même pas essayer. Heureusement pour nous, SCSS a des mécanismes en place pour organiser facilement le code de style.

Les fichiers contenant des fragments de descriptions de style peuvent être créés en ajoutant un trait de soulignement au début de leurs noms: _animations.scss , _base.scss , _variables.scss , etc.

La directive @import est utilisée pour importer ces fichiers. Voici comment utiliser ce mécanisme:

 //  _animations.scss @keyframes appear { 0% {   opacity: 0; } 100% {   opacity: 1; } } //  header.scss @import "animations"; h1 { animation: appear 0.5s ease-out; } 

Vous pouvez constater qu'il y a une erreur dans ce code. En effet, le fichier que nous voulons importer s'appelle _animations.scss , et nous, dans le fichier header.scss , utilisons la commande @import "animations" . Cependant, il n'y a pas d'erreur. SCSS est un système suffisamment intelligent pour comprendre que dans une telle situation, le développeur signifie le fichier correspondant.

C'est tout ce que nous devons savoir sur les variables, les constructions imbriquées, la fragmentation des styles et l'importation. Il existe d'autres fonctionnalités dans SCSS, telles que les mixins, l'héritage et d'autres directives (parmi elles sont @for , @if et quelques autres), mais nous n'en parlerons pas ici.

Si vous souhaitez mieux connaître SCSS, consultez la documentation correspondante.

Organisation CSS: méthodologie BEM

Je ne me souviens pas combien de fois j'ai utilisé des termes universels pour nommer les classes CSS. En conséquence, je pense que ces noms me sont familiers: .button , .page-1 , .page-2 , .custom-input .

Souvent, nous ne savons tout simplement pas comment nommer certaines entités. Mais c'est très important. Et si vous développiez l'application, puis, pour une raison quelconque, reportiez le travail de plusieurs mois? Ou, et c'est bien pire, et si quelqu'un d'autre se chargeait de ce projet? Si le code CSS utilise des noms inappropriés, il sera difficile à comprendre sans analyser d'autres parties de l'application.

La méthodologie BEM (Block, Element, Modifier) ​​est une approche composante du développement web. En particulier, il s'agit d'une convention de dénomination d'entité. Cette méthodologie vous permet de structurer le code, de le décomposer en modules et de faciliter sa réutilisation. Parlons des blocs, des éléments et des modificateurs.

▍ Blocs

Les blocs peuvent être considérés comme des composants. Vous avez sûrement joué enfant dans Lego. Par conséquent, allumez la machine à voyager dans le temps.

Comment avez-vous construit, disons, une maison ordinaire? Ici, vous aurez besoin d'une fenêtre, d'un toit, d'une porte, de murs et, en général, cela suffit. Ce sont tous nos blocs. Ils sont importants en eux-mêmes.

Dénomination: nom du bloc - .block

Exemples: .card , .form , .post , .user-navigation

▍ Éléments

Comment faire une fenêtre Lego? Probablement, certains cubes ressemblent à des cadres, donc si vous connectez quatre de ces cubes, vous obtenez une belle fenêtre. Ce sont les éléments. Ils font partie de blocs, nous en avons besoin pour créer des blocs. Cependant, les éléments en dehors des blocs sont inutiles.

+ __ + : + __ + - .block__element

Exemples: .post__author , .post__date , .post__text

▍ Modificateurs

Une fois que vous avez une fenêtre, vous pouvez la modifier. Par exemple - peignez dans une couleur différente. Ces modifications des blocs de base ou des éléments sont effectuées à l'aide de modificateurs. Ce sont des drapeaux de blocs ou d'éléments, et ils sont utilisés pour changer leur comportement, leur apparence, etc.

+ -- + : + -- + - .block__element--modifier , .block--modifier
Exemples: .post--important , .post__btn--disabled

▍ Remarques

• Lorsque vous utilisez BEM, les noms sont donnés exclusivement aux classes. Aucun ID ou balise - juste des classes.
• Les blocs ou éléments peuvent être imbriqués dans d'autres blocs ou éléments, mais ils doivent être complètement indépendants. C'est très important. Par conséquent, par exemple, vous n'avez pas besoin d'affecter des champs au bouton car vous souhaitez le placer sous l'en-tête, sinon le bouton sera associé à l'en-tête. Utilisez plutôt des classes d'assistance.
• Lors de l'application de la méthodologie BEM, les fichiers HTML seront surchargés de noms, mais c'est une somme modique pour les fonctionnalités que BEM nous offre.

▍Exercice

Voici un exercice. Examinez attentivement les sites que vous aimez ou ceux que vous utilisez le plus souvent, et réfléchissez à ce qui peut être un blocage sur eux, à ce qui est un élément et à ce qu'est un modificateur.

Par exemple, voici ce que j'ai obtenu en analysant le Google Store.


Analyse du site

Maintenant c'est ton tour. Regardez le site, réfléchissez à comment il peut être amélioré. Afin de se développer dans un certain domaine, une personne doit rechercher indépendamment des informations, expérimenter et créer quelque chose de nouveau.

▍ Exemples

Voici un exemple préparé par Codepen qui démontre les capacités de BEM. Ici, nous distinguons un peu quelque chose comme la publication dans un certain blog. Voici le HTML de cet exemple.

 <div class="post"> <span class="post__author">Thomas</span>     <span class="post__date">3 minutes ago</span> <p class="post__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam sit voluptatem aut quis quisquam veniam delectus sequi maxime ullam, inventore blanditiis quia commodi maiores fuga, facere quaerat doloremque in. Nisi!</p> </div> <div class="post mt-large post--important"> <span class="post__author">Thomas</span>     <span class="post__date">2 hours ago</span> <p class="post__text">Voluptatem incidunt autem consequatur neque vitae aliquam, adipisci voluptatum. Ipsum excepturi dolores exercitationem rem ab similique consequatur nesciunt, tempora aut vel unde.</p> </div> 

Voici les styles SCSS:

 .post { display: inline-block; padding: 1rem; background-color: #ccc; border: 1px solid #222; border-radius: 5px; &--important {   background-color: yellow; } &__author {   font-size: 1.2rem;   font-weight: bold;   color: blue; } &__date {   float: right; } &__text {   line-height: 2rem;   font-size: 1.3rem; } } .mt-large { margin-top: 3rem; } 

Mais que s'est-il finalement passé?


Faire des "publications" avec BEM

Prenons un autre exemple . Ici, en utilisant BEM, nous distinguons les boutons. Voici le HTML de cet exemple.

 <div> <button class="btn">   Click me </button> <button class="btn btn--danger">   Danger </button> <button class="btn btn--success">   Success </button> <button class="btn btn--small">   Small </button> <button class="btn btn--big">   Big </button> <button class="btn btn--border">   Border </button> </div> 

Voici les styles SCSS.

 .colors { font-size: 1.5rem; font-family: sans-serif; } .btn {   background-color: #FF6B93;   color: #fff;   text-transform: uppercase;   padding: 1.5rem 2.5rem;   border-radius: 4px;   transition: all .2s;   font-size: 1.3rem;   border: none;   letter-spacing: 2px;   cursor: pointer; &:hover {   background-color: #D15879; } &:focus {   outline: none; } &--danger {   background-color: #FF3B1A;     &:hover {     background-color: #D43116;   } } &--success {   background-color: #00D123;     &:hover {     background-color: #00AB1D;   } } &--small {   padding: 1rem 2rem;   font-size: 1rem; } &--big {   padding: 1.8rem 4.5rem;   font-size: 1.7rem; } &--border {   background-color: #fff;   color: #FF6B93;   border: 1px solid #FF6B93;     &:hover {     background-color: #FF6B93;     color: #fff;   } } } 

Et voici le résultat.


Conception de boutons à l'aide de la méthodologie BEM

Organisation des fichiers CSS: le modèle 7-1

Parlons de l'organisation des fichiers CSS. Ce que vous apprenez de cette partie de notre conversation vous permettra de travailler de manière plus productive et vous aidera, dans des situations appropriées, à trouver instantanément le code CSS à modifier. Pour y parvenir, nous devons étudier le modèle "7-1".

Il vous semblera peut-être maintenant que ce modèle est en quelque sorte trop étrange. Cependant, il n'y a rien d'étrange ici, et son utilisation est très simple. Pour ce faire, il suffit d'observer deux règles simples:

1. Tous les fichiers contenant des fragments SCSS doivent être placés dans 7 dossiers différents.
2. Tous ces fichiers doivent être importés dans un fichier, main.scss , situé dans le répertoire racine dans lequel se trouvent tous ces dossiers.

Par conséquent, le nom du modèle peut être décrypté en «7 dossiers - 1 fichier». Comme vous pouvez le voir, ce n'est pas si difficile. Parlons plus en détail de ce modèle.

▍ 7 dossiers

Voici les dossiers en question:

1. base : dans ce dossier, vous devez placer tout, pour ainsi dire, le code "modèle". Par code "modèle", nous entendons ici tout le code CSS que vous devez écrire lors de la création d'un nouveau projet. Par exemple: règles typographiques, animations, utilitaires (c'est-à-dire des classes comme margin-right-large , text-center ), etc.
2. components : le nom de ce dossier indique clairement ce qui y sera stocké. Nous parlons des styles de composants utilisés pour créer des pages. Ce sont des boutons, des formulaires, toutes sortes de curseurs, des fenêtres contextuelles, etc.
3. layout : ce dossier est utilisé pour stocker les styles des éléments de mise en page. Il s'agit de l'en-tête et du pied de page de la page, de la zone de navigation, des différentes sections de la page, de la grille, etc.
4. pages : parfois un projet a besoin de pages qui ont leur propre style spécifique, différent du style des autres pages. Les descriptions de style de ces pages spéciales se trouvent ici dans ce dossier.
5. themes : si un projet Web implique l'utilisation de différents thèmes (par exemple, quelque chose comme «mode sombre» ou «admin»), les styles pour eux doivent être mis ici.
6. abstracts : toutes sortes de choses auxiliaires entrent dans ce dossier - fonctions, variables, mixins.
7. vendors : un site rare sans dépendances externes. Ce dossier contient des styles qui ne sont pas créés par ceux qui développent un site particulier. Ici, par exemple, vous pouvez enregistrer les fichiers de projet Font Awesome, les styles Bootstrap, etc.

▍Fichier main.scss

C'est dans ce fichier que tous les fragments de styles disposés dans les sept dossiers ci-dessus sont importés. Une partie de ce fichier pourrait ressembler à ceci:

 @import abstracts/variables; @import abstracts/functions; @import base/reset; @import base/typography; @import base/utilities; @import components/button; @import components/form; @import components/user-navigation; @import layout/header; @import layout/footer; 

Je ne peux pas être d'accord avec le fait que toute cette conception de sept dossiers semble assez grande. Cependant, il convient de noter que cette architecture est conçue pour les grands projets. Pour les petits projets, vous pouvez utiliser la version adaptée du modèle "7-1". Les caractéristiques de cette version sont qu'elle peut se passer de certains dossiers. Donc, ici, vous pouvez refuser le dossier des vendors en plaçant des liens vers des feuilles de style externes au projet dans la balise de link . De plus, vous pouvez vous passer du dossier des themes , car, probablement, les thèmes ne seront pas utilisés dans une petite application Web. Et enfin, vous pouvez vous débarrasser du dossier des pages , car dans ce projet, très probablement, il n'y aura pas de pages dont le style est très différent du style général. En conséquence, sur sept dossiers, il n'en reste que quatre.

De plus, en faisant un petit projet, vous pouvez aller de deux manières:

• Si vous préférez utiliser ce qui reste du modèle «7-1», vous enregistrez les abstracts , les components , la layout et la base des dossiers.
• Si vous décidez de vous débrouiller avec un seul grand dossier, tous les fichiers contenant des fragments de style, ainsi que le fichier main.scss , tombent dans ce dossier. Cela peut ressembler à ceci:

 sass/ _animations.scss _base.scss _buttons.scss _header.scss ... _variables.scss main.scss 

Que choisir exactement dépend de vos préférences.

Ici, si vous êtes inspiré par l'idée d'utiliser SCSS, vous pouvez avoir une question sur la façon d'utiliser ces styles, car les navigateurs ne les prennent pas en charge. En fait, c'est une bonne question qui nous amène à la dernière étape de notre conversation, à la compilation de SCSS en CSS.

Compilation de SCSS en CSS

Pour convertir le code SCSS en CSS, vous aurez besoin de la plateforme Node.js et du gestionnaire de packages NPM (ou Yarn ).

Nous utiliserons le node-sass , qui nous permet de compiler des fichiers .scss fichiers .scss . Il s'agit d'un outil en ligne de commande, il est facile à utiliser. À savoir, l' node-sass ressemble à ceci:

 node-sass <input> <output> [options] 

De nombreuses options sont disponibles ici. Nous nous concentrerons sur deux:

• L'option -w vous permet de surveiller un dossier ou un fichier. Autrement dit, node-sass gardera une trace des modifications dans le code et, lorsqu'elles se produisent, compilent automatiquement les fichiers en CSS. Cette fonctionnalité est très utile pendant le processus de développement.
• L'option --output-style détermine le style du fichier CSS de sortie. Plusieurs options sont disponibles ici: nested , expanded , compact , compressed . Nous utiliserons cette option pour construire un fichier CSS fini.

Si vous êtes une personne curieuse (j'espère que c'est le cas, car la curiosité n'est que pour le bénéfice du développeur), alors vous serez probablement intéressé par la documentation du node-sass .

Nous avons donc décidé des outils, maintenant la chose la plus simple reste. Afin de convertir SCSS en CSS, vous devez suivre ces étapes:

Créez un dossier de projet et accédez-y:

 mkdir my-app && cd my-app 

Initialisez le projet:

 npm init 

Ajoutez le package node-sass au projet:

 npm install node-sass --save-dev 

Créez un fichier index.html , des dossiers de styles, main.scss fichier main.scss :

 touch index.html mkdir -p sass/{abstracts,base,components,layout} css cd sass && touch main.scss 

Ajoutez ce qui suit au fichier package.json :

 { ... "scripts": {   "watch": "node-sass sass/main.scss css/style.css -w",   "build": "node-sass sass/main.scss css/style.css --output-style compressed" }, ... } 

Ajoutez le lien menant au fichier CSS compilé dans la balise head du fichier index.html :

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/style.css"> <title>My app</title> </head> <body> <h1 class="heading">My app</h1> </body> </html> 

C’est tout. Maintenant que vous travaillez sur le projet, exécutez la npm run watch et ouvrez le fichier index.html dans votre navigateur. Pour réduire CSS, exécutez la npm run build .

Utilitaires supplémentaires

▍ Rechargement de page interactif

Vous souhaiterez peut-être organiser un rechargement de page interactif pour augmenter la productivité. C'est plus pratique que de recharger manuellement index.html . Voici comment procéder:

Installez le package live-server (notez qu'il est installé globalement):

 npm install -g live-server 

Ajoutez le package npm-run-all , selon le projet, qui vous permet d'exécuter plusieurs scripts en même temps:

 npm install npm-run-all --save-dev 

Ajoutez ce qui suit à package.json :

 { ... "scripts": {   "start": "npm-run-all --parallel liveserver watch",   "liveserver": "live-server",   "watch": "node-sass sass/main.scss css/style.css -w", }, ... } 

Maintenant, après avoir exécuté la commande npm run start , vous, en train de travailler sur le projet, verrez instantanément les modifications qui y sont apportées sans recharger la page manuellement.

Package package autoprefixer

A ce stade, vous disposez d'un environnement de développement personnalisé, ce qui est très bien. Parlons maintenant des outils de construction d'un projet, et en particulier du package autoprefixer . Il s'agit d'un outil (nous parlons d'un plugin postcss) qui analyse le code CSS et ajoute des préfixes de fournisseurs de navigateur aux règles CSS en utilisant les données de Can I Use .

Lors de la création du site, le programmeur peut utiliser de nouvelles fonctionnalités qui ne sont pas entièrement prises en charge par tous les navigateurs. Les préfixes de navigateur visent à résoudre un certain nombre de problèmes, notamment le développement d'applications Web inter-navigateurs.

Le code avec les préfixes du navigateur ressemble à ceci:

 -webkit-animation-name: myAnimation; -moz-animation-name: myAnimation; -ms-animation-name: myAnimation; 

Il est facile de remarquer que l'écriture d'un tel code est très fastidieuse. Afin de faciliter la tâche d'assurer la compatibilité de notre code CSS avec différents navigateurs, sans compliquer le projet, nous utiliserons le package autoprefixer . Ici, vous devrez effectuer les étapes suivantes:

• Nous compilons tous les fichiers SCSS dans un seul fichier CSS principal.
• Ajoutez les préfixes du navigateur à ce fichier à l'aide du autoprefixer .
• Compressez ce fichier CSS.

Il s'agit en général de la dernière étape des travaux sur le projet. Voici donc ce que vous devez faire pour utiliser le autoprefixer :

Ajoutez deux dépendances au projet - postcss-cli et autoprefixer :

 npm install autoprefixer postcss-cli --save-dev 

Ajoutez le code suivant à package.json et modifiez le script de build :

 { ... "scripts": {   "start": "npm-run-all --parallel liveserver watch",   "liveserver": "live-server",   "watch": "node-sass sass/main.scss css/style.css -w",   "compile": "node-sass sass/main.scss css/style.css",   "prefix": "postcss css/style.css --use autoprefixer -o css/style.css",   "compress": "node-sass css/style.css css/style.css --output-style compressed",   "build": "npm-run-all compile prefix compress" ... } 

npm run build , CSS-, . , , . — , , .

, ,

Résumé

, CSS, , , CSS-, , .

Chers lecteurs! -?