• 15 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 10/20/20

Utilisez le système 7-1 pour une codebase plus simple à gérer

Log in or subscribe for free to enjoy all this course has to offer!

Est-ce que comme moi ça vous arrive d’être tellement occupé que lorsque vous avez enfin un moment pour souffler, vous regardez autour de vous et vous rendez compte qu’il y a pas mal de bazar ?

Yep yep, c’est l’heure de faire le ménage. Personne n’aime ça, mais prendre du recul et ranger un peu est vital pour maintenir une codebase propre et saine.

Organisez et structurez votre code

Jusqu’à présent, vous avez beaucoup appris, et écrit du code par la même occasion. Vos fichiers Sass sont bien ordonnés, avec des variables groupées et des composants écrits sous forme de blocs BEM bien rangés et propres. Mais vous devez aussi parcourir des mixins, fonctions et autres bouts de code pour pouvoir trouver un élément en particulier.

Fort heureusement, Sass vous permet de séparer votre code en fichiers séparés pour le catégoriser et l’organiser. Vous pouvez mettre toutes vos variables dans un fichier et tous vos mixins dans un autre. Pareil pour les feuilles de style et les composants. Pouvoir ouvrir un fichier précis et trouver facilement un morceau de code vous évitera des migraines et vous fera gagner beaucoup de temps.

Découvrez le modèle 7-1

Pour ordonner tous ces nouveaux fichiers, vous allez utiliser ce qui s’appelle le système de fichiers 7-1. Le “7”, ce sont les sept directories thématiques (des dossiers, en langage de développeur) pour ranger vos fichiers, qui sont regroupés dans le “1” : un fichier .scss unique se compilant sous forme de feuilles de style CSS pour votre site.

C’est parti ! Créons donc les sept directories suivants dans notre directory Sass, chacun d’entre eux représentant une catégorie de code Sass :

  1. Base.

  2. Utils.

  3. Layout (mise en page).

  4. Composants.

  5. Pages.

  6. Themes.

  7. Vendors (tiers).

Un moyen rapide de créer des directories est d’utiliser le terminal dans VS Code et la commande mkdir suivie du nom du directory que vous souhaitez créer. Vous pouvez créer plusieurs directories simultanément en les listant l’un après l’autre :

Maintenant que vous avez créé vos sept directories pour y stocker votre code, on va voir à quoi sert chacun d’entre eux :

  • le directory base/ contient les fichiers qui définissent les fondations de votre site, par exemple la police de caractères et les normes que vous voulez appliquer sur tout votre site, telles que le box-sizing ;

  • dans utils/, vous rangez vos variables, fonctions, mixins et les  %placeholders pour les extensions (si vous en utilisez) ;

  • layouts/ est le dossier où vous mettez vos blocs BEM qui contiennent ce qui est réutilisable, par exemple un header pour les mises en page de grande taille ou un footer ;

  • components/ est utilisé pour ranger les blocs BEM qui sont plus indépendants, comme les boutons.

Alors que les layouts peuvent utiliser d’autres composants pour générer leurs contenus, les composants, eux, sont plus élémentaires. Par exemple, un formulaire doit être considéré comme un layout : la mise en page est une fonction vitale du bloc et il utilise d’autres blocs pour fonctionner,  comme des boutons. En revanche, le bouton lui-même est un composant car il n’a besoin d’aucun autre composant pour remplir sa fonction ;

  • pages/ contient les blocs de code qui ne s’appliquent qu’à une seule page. Vous utilisez des boutons dans tout votre site, en revanche votre page d’accueil comporte une section Citation et une grille de projets qui ne sont employés nulle part ailleurs. En d’autres termes, pages/ contient des règles spécifiques à une seule page qui ne seront pas réutilisées ailleurs ;

  • themes/, c’est ici que vous stockez le code thématique, par exemple un style customisé pour Noël ou pour l’été. On ne l’utilisera pas dans notre site ;

  • vendors/ est un directory pour des feuilles de style externes comme Bootstrap ou jQuery UI. En gros, il s’utilise pour tout CSS venant de l’extérieur. Utiliser des frameworks comme Bootstrap permet d’accélérer le développement d’un site, car ils contiennent des feuilles de style prédéfinies pour des choses comme les formulaires ou des boutons.

Essayez par vous-même !

Dans cet exercice, entraînez-vous et créez les sept directories du 7-1 pattern via le terminal ou via le panneau de navigation.

Coding application
Houston... ?
It seems you're not connected to the internet.
You are not signed in

Sign in to access coding exercises and test your new skills.

Make sure to practice in this chapter before moving on.

Nettoyez et réorganisez vos fichiers

Maintenant que vous avez tous ces directories sous la main, qu’est-ce que vous pouvez bien en faire ? Commençons par ranger un peu en mettant toutes les variables dans leur fichier attitré. Pour cela, créez un fichier dans le dossier Utils, nommé  _variables.scss  :

Image illustrant la création d'un fichier
Création d'un fichier

Vous avez maintenant un fichier pour vos variables imbriqué dans le directory utils/. Son titre est logique : un fichier nommé “variables” pour ranger des variables. 

Mais pourquoi cet underscore ? 🤔

Lorsque vous séparez votre code, les fichiers individuels font tous partie d’une codebase globale, du coup Sass les appelle des partiels. Pour indiquer à Sass qu’un fichier est un partiel, vous devez lui ajouter le préfixe underscore (_).

Tous les partiels commencent par un underscore (_), suivi de son nom (ici variables) puis de l’extension de fichier   .scss  👉🏼  _variables.scss

Nous avons un fichier pour nos variables ; à présent nous pouvons couper nos variables de notre fichier scss principal pour les coller dans notre nouveau fichier   _variables.scss  :

Image illustrant le fichier variables à couper
Le fichier Variables à couper

Ah… regardez le CSS compilé, vous voyez une erreur !

error sass/main.scss (Line 16: Undefined variable: "$colour-secondary".)

Sass vous indique que vous utilisez des variables non définies dans le code. Nous avons déplacé nos variables dans leur propre partiel, mais nous n’avons pas dit au fichier main.scss où les trouver ! Avant de pouvoir utiliser du code qui a été découpé en partiels, vous devez préciser dans votre codebase où importer ces nouvelles variables. Comment ? En utilisant le mot clé @import.

@import "./utils/variables";

Pour importer les variables, vous devez taper @import suivi d’une paire de guillemets. Entre les guillemets, renseignez le chemin vers le partiel des variables.

Le point (.) indique à Sass que pour arriver jusque variables, le chemin commence dans le même dossier que main.scss. Ensuite, /utils/ mène Sass au directory utils dans lequel il trouvera le partiel variables.

Et si vous jetez un œil au CSS compilé, vous verrez que les variables se comportent comme si elles se trouvaient encore dans le fichier main.scss :

body {
box-sizing: border-box;
background: #001534;
}

Parfait ! Nous avons rendu notre code plus propre en regroupant toutes nos variables de couleurs au même endroit.👌

Essayez par vous-même !

Dans cet exercice, regroupez les couleurs dans un nouveau fichier.

Coding application
Houston... ?
It seems you're not connected to the internet.
You are not signed in

Sign in to access coding exercises and test your new skills.

Make sure to practice in this chapter before moving on.

Faites de l’ordre dans le bloc formulaire

Maintenant que vous l’avez fait pour les couleurs, on ne va pas s’arrêter en si bon chemin. Attaquons-nous au bloc du formulaire ! Dans layouts/, créez un nouveau partiel nommé _form.scss, puis coupez-collez le bloc formulaire depuis main.scss. Pourquoi le directory layout ? Parce que le formulaire est un grand composant, qui en contient plusieurs et qu’il peut être réutilisé.

.form {
width: 100%;
padding-bottom: $grid-gutter;
&__heading {
width: 100%;
color: $colour-white;
@include heading-shadow;
background: $colour-primary;
line-height: 5rem;
padding: $grid-gutter;
}
&__field {
& label {
color: $colour-accent;
display: block;
font-size: map-get($txt-size, label);
line-height: map-get($txt-size, label);
padding-top: $grid-gutter;
}
& input {
width: 100%;
background: $colour-secondary;
@include border;
padding: $grid-gutter;
color: $colour-accent;
}
& textarea {
width: 100%;
color: $colour-primary;
background: $colour-secondary;
@include border;
outline: none;
padding: $grid-gutter;
margin-bottom: $grid-gutter*0.5;
&:active, &:focus {
color: $colour-accent;
}
}
}
}

Maintenant que le bloc formulaire est dans son propre partiel, nous devons l’importer dans notre fichier principal pour pouvoir l’utiliser, comme avec variables :

@import "./utils/variables";
@import "./layouts/form";

Notez que nous avons placé l’import du formulaire après les variables. L’ordre dans lequel vous importez vos partiels dans le fichier principal est l’ordre dans lequel Sass compilera tout ce qu’ils contiennent. Si on importait le partiel du formulaire avant les variables, on aurait une erreur de compilation, car les variables utilisées dans le formulaire n’auraient pas encore été définies !

D’une manière générale, pour éviter les erreurs, faites en sorte d’importer vos fichiers dans l’ordre suivant :

  1. Utils :

    1. Variables.

    2. Fonctions.

    3. Mixins.

    4. Placeholders.

  2. Feuilles de style de tiers (vendors) (si vous en avez).

  3. Base.

  4. Composants.

  5. Layout.

  6. Pages.

  7. Thèmes.

Vous n’aurez sans doute pas besoin de tous ces dossiers pour chaque site sur lesquels vous travaillerez. Le site que nous construisons dans ce cours n’utilise pas de feuilles de styles externes, ni de thèmes, par exemple. Mais il est important que vous les connaissiez 👌.

Une fois que l’ensemble du code a bien été séparé en partiels et importé, le fichier main.scss ne doit contenir que des imports. Les ensembles de règles sont eux aussi rangés dans leurs propres partiels :

@import "./utils/variables";
@import "./utils/functions";
@import "./utils/mixins";
@import "./utils/extensions";
@import "./base/base";
@import "./base/typography";
@import "./components/buttons";
@import "./layouts/header";
@import "./layouts/nav";
@import "./layouts/container";
@import "./layouts/form";
@import "./pages/work";
@import "./pages/about";
@import "./pages/project";

À présent, pour trouver un bout de code, c’est aussi simple que de regarder votre fichier main.scss pour voir où il est rangé ! Facile à lire, écrire et maintenir. Les règles d’or du code sont honorées ! 🙌

En résumé

  • Le système de fichiers 7-1 se compose de sept dossiers thématiques qui sont regroupés dans un fichier .scss. 

  • Les 7 directories thématiques sont : 

    • Base ;

    • Utils ;

    • Layout (mise en page) ;

    • Composants ;

    • Pages ;

    • Thèmes ;

    • Vendors (tiers).

  • Dans Sass, les différents fichiers s’appellent des partiels. Ils commencent par un underscore

  • On importe les partiels dans le fichier principal .scss en utilisant le mot clé @import. 

  • Dans Sass, les partiels sont compilés dans le même ordre que celui dans lequel ils sont importés.  

Dans le chapitre suivant, nous allons installer Sass sur votre ordinateur !

Example of certificate of achievement
Example of certificate of achievement