: #e67e22;
color: #242424;
}
</code>
Regardez bien, prenez votre temps et trouvez les répétitions.
... ue vous avez dupliqué votre code. En soi, rien de bien grave, mais en termes de lecture on se répète bea... pour rendre notre code plus lisible pour des cas bien précis.
On commence par le refactoring !
Le ... r, il nous faut trouver les répétitions. Ça tombe bien, rappelez-vous plus haut : nous avons analysé not
e sur le web, les navigateurs respectent un ordre bien précis : en premier le HTML, qui va déterminer le... es lorsqu’un texte reste bleu alors que vous avez bien précisé qu’il est rouge.
===== Différenciez les... tera sur Salamèche, car l’eau triomphe du feu. Eh bien c’est pareil en CSS : le navigateur établit des r... établis dans notre CSS ! 😨
Mais pourquoi ? On a bien tout détaillé dans notre CSS, pourtant ?
Le navi
en aurait besoin, ce serait vraiment pratique. Eh bien, heureusement pour nous, il existe bien une solution pour le faire, et c’est une **variable**! 🙌
Les v... t, quand vous regardez le CSS compilé, vous voyez bien que Sass a remplacé le nom de la variable par la ... vos variables. ''$light-purple'' fonctionne très bien pour un violet clair c’est sûr, seulement il est
nctionne tel ou tel élément. D’où l’importance de bien nommer vos sélecteurs.
Si je nomme ma classe ''.... primer le CSS ?
Tout peut arriver, mais tout ira bien, il nous suffit d’anticiper !
===== Découvrez B... ilisable, ce qui nous permet d’avoir une codebase bien ordonnée, tout en assurant une certaine cohérence... nisé et compréhensible.
<note>
D’ailleurs, notez bien, c’est important : les sélecteurs BEM sont toujou
l'ombre a changée dans le brief !
Wow. Là c’est bien flashy niveau couleur !
Avant même de commencer ... a coul... stooooooop. 🛑
Dans ce cas-ci, on parle bien d’une seule ombre. Mais imaginons que sur d’autre... ous noyer dans une complexité de définitions. 😵💫 Bien au contraire !
Tout d’abord, qu’est-ce qu’une fo... urer, inverser et même assombrir les couleurs (et bien d’autres encore, la liste est longue…). Dans notr
us ne trouvez pas ? Exactement comme en HTML ! Eh bien, c’est une des fonctionnalités de Sass : le nesti... der en utilisant une syntaxe plus cohérente c’est bien pratique, le souci c’est que les navigateurs sont... hier .sass ?!
Oh que non ! Sass fonctionne très bien avec le CSS. Copiez votre CSS et collez-le dans u
*une seule colonne**. Au final, cette section est bien plus lisible de cette manière sur petit écran.
M... r tout séparer, la media query et ses règles sont bien **imbriquées dans leur bloc BEM** ; du coup, bonu... Vous avez parcouru un sacré bout de chemin, c’est bientôt la fin de ce cours ! Mais pas si vite ! Il fau
ilisez Sass en ligne =====
Si vous vous souvenez bien, en fin de la partie 1, je vous expliquais que le... besoin de… compiler notre code en CSS.
Il existe bien des outils et plateformes en ligne pour pouvoir p... code>
sass index.scss index.css
</code>
Vérifiez bien que vous avez la dernière version de Sass :
<cod
fichiers HTML/CSS. On aurait gagné du temps aussi bien dans la rédaction que dans la mise en œuvre ou la... écrire du CSS qui soit clair, organisé et surtout bien structuré ?
* Comment s’assurer que le code est
purple {
color: #a5b4fc;
}
</code>
On obtient bien un code plus lisible et compréhensible !
<note>
... emple proche de quelque chose que vous connaissez bien maintenant : la barre de navigation de la partie
e sélecteur parent de <li> n’est pas section mais bien ul. Cette réponse est fausse. Si vous vouliez uti... nse 3 est un combinateur descendant. Votre li est bien un descendant de section.
++++
===== Question 3
