Quiz : Structurer son code
Question 1
La méthode DRY est un des concepts fondamentaux lorsqu’on souhaite simplifier notre CSS ; cette méthode consiste à :
répéter les sections les plus utilisées ;
dupliquer les sélecteurs pour les rendre plus spécifiques ;
refactoriser le code afin d’éviter les répétitions ;
réorganiser votre
CSS par ordre d’apparition dans votre
HTML et favoriser la compréhension.
Réponse
Choix 3. DRY signifie Do not Repeat Yourself. L’objectif est d’éviter les répétitions et obtenir des sélecteurs CSS génériques qui peuvent être réutilisés. Les deux premières réponses sont fausses car contraires au principe du DRY : éviter les répétitions.
La dernière réponse part d’une bonne intention, c’est une bonne idée dans un premier temps. Cependant, cela ne fait pas partie du principe du DRY et ne vous évitera pas les répétitions.
La 3e réponse est juste : le principe du DRY est de refactoriser votre code, d’éviter les répétitions.
Question 2
Vous voulez créer deux nouveaux boutons :
et ce, tout en conservant les propriétés de votre premier bouton ci-dessous :
.btn {
background-color: #001534;
color: white;
padding: 1.5rem;
}
En appliquant le principe du DRY, qu’obtenez-vous ?
.btn {
background-color: #001534;
color: white;
padding: 1.5rem;
border-radius: 25px;
}
.btn-green {
background-color: #185730;
}
.btn {
background-color: #001534;
color: white;
padding: 1.5rem;
}
.btn-green {
background-color: #185730;
}
.btn-rounded {
border-radius: 25px;
}
.btn-first {
background-color: #001534; color: white; padding: 1.5rem;
}
.btn-green {
background-color: #185730;
color: white;
padding: 1.5rem;
}
.btn-rounded {
background-color: #001534;
color: white;
padding: 1.5rem;
border-radius: 25px;
}
Réponse
Choix 2. La première réponse génère deux nouveaux boutons mais ne respecte pas les principes du DRY. Vous obtenez deux nouveaux boutons mais au prix de multiples répétitions.
Pour la troisième, vous êtes sur la bonne voie : vous avez un bouton de base, et une classe qui rend votre bouton vert ; mais votre bouton de base rendra tous vos boutons avec des bords carrés, alors qu’on vous demande un bouton aux bords arrondis.
La deuxième réponse est juste : vous conservez les propriétés de .btn tout en créant de nouveaux boutons qui répondent aux besoins des deux boutons sans altérer le .btn générique existant.
Question 3
En CSS, la spécificité permet :
d’attribuer un score à un sélecteur afin de déterminer la priorité d’un sélecteur par rapport à un autre ;
d’éviter les répétitions et d’obtenir un code générique et réutilisable ;
d’assigner chaque sélecteur à une catégorie pour définir sa fonctionnalité et ses relations ;
de dupliquer vos sélecteurs pour obtenir un code plus lisible et plus précis.
Réponse
Choix 1. La réponse 2 n’est pas la définition de la spécificité mais du principe DRY : Do not Repeat Yourself.
La réponse 4 est le total opposé du principe du DRY.
La réponse 3 est une partie de la définition de BEM. Le principe de BEM est de renommer vos sélecteurs pour leur assigner une catégorie : Bloc, Élément ou Modificateur.
La bonne réponse est la première : la spécificité permet de mesurer le poids d’un sélecteur et, dans le cas d’une égalité, sera utile à votre navigateur pour appliquer le CSS.
Question 4
En vous basant sur le code HTML et CSS ci-dessous :
<div id="header" class="header">
Header Content!
</div>
div {
background-color: red;
}
.header {
background-color: green;
}
#header {
background-color: blue;
}
Quelle couleur de fond sera appliquée à notre div ?
Rouge
Vert
Bleu
Réponse
Choix 3. En suivant le principe de la spécificité et les règles de priorité :
inline > id > classes > éléments.
Dans le HTML sont déclarés : un élément div, une classe .header, et un id #header.
Il n’y a pas de code CSS dans votre HTML (ou inline), le navigateur passe au suivant : id. Un ID est déclaré, c’est donc lui qui l’emporte. La bonne réponse est donc la dernière : bleu !
Si vous supprimez l’ID de votre HTML, ce sera la classe qui sera appliquée ; enfin, si vous supprimez la classe de votre HTML ce sera la couleur de fond de l’élément.
Question 5
BEM signifie Bloc, Élément, Modificateur. Quels sont les buts de cette convention ?
(Plusieurs réponses possibles).
Attribuer un score aux sélecteurs afin de déterminer leur style ;
Assigner chacun de vos sélecteurs à une de ces trois catégories ;
Définir la fonctionnalité et les relations d’un sélecteur par son nom ;
Compiler votre code pour qu’il puisse être interprété par tous les navigateurs
Réponse
Choix 2 et 3. La réponse 1 donne une définition, non pas de BEM, mais de la spécificité.
La réponse 4 ne concerne pas BEM mais les préprocesseurs : votre navigateur n’est pas capable d'interpréter un code Sass, votre code doit être compilé en CSS pour que votre navigateur puisse le lire et le comprendre.
Les réponses 2 et 3 sont justes : BEM est l’acronyme de Bloc, Élément, Modificateur. En assignant chaque sélecteur que vous écrivez à l’une de ces trois catégories, vous serez en mesure de définir sa fonctionnalité et ses relations par leur nom.
Question 6
En vous basant sur le HTML suivant,
<div class="header">
<h1> Titre de mon site </h1>
<p> Introduction de mon nouveau site internet </p>
<ul>
<li>Accueil</li>
<li>Portfolio</li>
</ul>
</div>
quelle serait la manière adaptée de nommer le h1 tout en suivant la convention BEM ?
.header .title
.title__header
.header__title
.header--title
.header__title--h1
Réponse
Choix 3. Selon la convention BEM, pour nommer un élément il vous faut le nom du bloc, suivi de deux underscores, suivis du nom de votre élément.
La réponse 1 ne respecte pas la convention BEM, nous avons simplement deux sélecteurs.
Dans notre cas, .header est notre bloc.
La réponse 2 respecte la convention certes, mais considère .title comme le bloc et .header comme l’élément.
Les réponses 4 et 5 respectent aussi la convention BEM. Seulement cette syntaxe n’est pas celle des blocs mais des modificateurs : indiquez le nom du bloc ou de l’élément qui sera modifié, suivi de deux tirets et du style graphique de votre modificateur.
La bonne réponse est la 3 ! Votre bloc .headers est suivi de deux underscores puis de la fonction de l’élément, ici : title !
Question 7
Sass est un préprocesseur CSS. C’est un outil qui vous permet :
(Plusieurs réponses possibles)
de lancer un script et corriger automatiquement les
fautes de votre
CSS ;
de générer un code
CSS directement à partir du
HTML en le compilant ;
de passer du
CSS au SCSS puis au Sass pour aider votre navigateur à lire votre
CSS ;
d’écrire du
CSS avec une syntaxe différente ;
d’utiliser des fonctionnalités différentes du
CSS.
Réponse
Choix 4 et 5. Sass est un préprocesseur CSS qui contient de nombreuses fonctionnalités pour vous aider à écrire un code plus maintenable : les réponses 4 et 5 sont justes.
Les réponses 1 et 2 sont fausses : Sass n’est malheureusement pas encore capable de lancer un script et de corriger vos fautes CSS, et encore moins de générer du code à partir de votre HTML.
La réponse 3 est fausse, Sass et SCSS sont deux syntaxes différentes ; en nommant votre fichier CSS avec l’extension souhaitée .sass ou .scss, vous déterminez la syntaxe qui sera utilisée dans votre fichier.
Question 8
Comment pourriez-vous refactoriser ce bout de code avec la syntaxe Sass et plus précisément en SCSS ?
.div {
background-color: red;
}
.div a {
color: #325e30;
}
.div a {
background-color: red;
a {
color: #242424;
}
}
.div {
background-color: red;
a {
color: #242424;
}
}
.div, a {
background-color: red;
color: #242424;
}
Réponse
Choix2. La syntaxe Sass a pour avantage de nous permettre de nester, ou imbriquer notre code. Elle s’appuie sur la syntaxe du CSS standard tout en bénéficiant des fonctionnalités Sass.
La réponse 3 n’aurait pas le même effet que le CSS donné en exemple puisque le style serait appliqué aux deux sélecteurs. De plus, cette syntaxe est celle du CSS.
La réponse 1 respecte la syntaxe Sass mais double le sélecteur ; on obtiendra un code compilé CSS comme ceci :
.div a {
background-color: red;
}
.div a a {
color: #242424;
}
La réponse 2 est juste : votre CSS indique bien que votre sélecteur s’applique aux liens présents dans votre sélecteur parent .div.
◁ Précédent |
⌂ Retour au sommaire |
Suivant ▷
