{{tag>cours dev développement web css sass html}}
====== Optimisez la lecture du code ======
Notes ... mant. Seulement soyez prudent, des sélecteurs qui deviennent trop spécifiques se verront accorder un pl... a conséquence ? Un casse-tête à débugger, et vous devrez refactoriser votre code.
Nous avons effectué ... ez augmenté la spécificité de votre élément. Vous devez aussi augmenter celle de vos modificateurs, sin
{{tag>cours dev développement web css sass html}}
====== Utilisez les variables et mixins ======
No... Mais c’est une sacrée perte de temps et cela peut devenir **dangereux**.
Pour la perte de temps je com... olet et veut que son site soit orange. Vous allez devoir repasser en revue **tous** vos fichiers CSS, m... agisse de violet, de rose ou… d’orange ! Là où ça devient intéressant, c’est que lorsque vous vous repl
{{tag>cours dev développement web css sass html}}
====== Adaptez votre code sur tous supports ======... re site s’adapte sur n’importe quel support, nous devons mettre en place des **media queries**.
===== ... on est abordée dans le cours [[cours:informatique:dev:web:creez_votre_site_web_avec_html5_et_css3:420_r... }
}
</code>
Pas mal, non ? Plutôt que de devoir tout séparer, la media query et ses règles son
{{tag>cours dev développement web css sass html}}
====== Simplifiez votre code ======
Notes et tran... L à mettre en forme dans nos pages web.
[[https://developer.mozilla.org/en-US/|MDN]], ou Mozilla Developer Network, est un site hébergé par la fondation Moz... en les séparant par leur fonction, votre codebase devient plus **facile à maintenir**. Plutôt que de re
{{tag>cours dev développement web css sass html}}
====== Définissez des priorités ======
Notes et t... r spécificité =====
Jetons un œil à la [[https://developer.mozilla.org/fr/docs/Learn/CSS/Building_bloc... ces : n’hésitez pas à relire [[cours:informatique:dev:web:creez_votre_site_web_avec_html5_et_css3/210_i
{{tag>cours dev développement web css sass html}}
====== Clarifiez votre HTML avec BEM ======
Notes... bar__link%%''.
Pour nommer le modificateur, vous devez :
* préciser le **bloc** (ou l’élément) qu’i... orme de classes.
</note>
Mais pourquoi ? 🤔
Vous devez être sûr que **vos sélecteurs ont une spécifici
{{tag>cours dev développement web css sass html}}
====== Quiz : Optimiser son CSS avec Sass ======
... sperluette est un préfixe que vous pouvez ajouter devant un sélecteur pour le relier directement à son ... e est la 2 !
++++
===== Question 4 =====
Vous devez déclarer une variable appelée **button-radius**
{{tag>cours dev développement web css sass html}}
====== Simplifiez vous le CSS avec Sass ======
No... .
Prérequis : voir le cours [[cours:informatique:dev:web:creez_votre_site_web_avec_html5_et_css3:000_s
{{tag>cours dev développement web css sass html}}
====== Passez au niveau supérieur avec Sass ======... ire et les utiliser.
Mais attends, du coup on va devoir tout réécrire en Sass dans un fichier .sass ?
{{tag>cours dev développement web css sass html}}
====== Déployez votre code Sass en ligne ======
N... ême chose, si vous travaillez en entreprise, vous devrez installer le code en local sur votre ordinateu
