==== Adaptez votre code sur tous supports ======
Notes et transcriptions du cours [[https://openclassro... ===== Révisez les principes du responsive =====
<note>
Les media queries sont des règles qui indiquent ... ries|Créez votre site web avec HTML5 et CSS3]].
</note>
Les media queries indiquent au navigateur d’**... edia queries sont appelées des **breakpoints**.
<note>
Les breakpoints représentent les **limites** lié
}}
====== Optimisez la lecture du code ======
Notes et transcriptions du cours [[https://openclassro... t bien un code plus lisible et compréhensible !
<note>
Si vous souhaitez vous entraîner et comparer ce ... t d’observer en temps réel le code CSS compilé.
</note>
===== Incorporez les sélecteurs au nesting ====... v .petite-fille-div {
color: #D6FFF5;
}
</code>
<note>
Au lieu de répliquer exactement la structure du
====== Utilisez les variables et mixins ======
Notes et transcriptions du cours [[https://openclassro... correspondante :
{{comparaison_css_sass.png}}
<note>
Ne soyez pas trop spécifique lorsque vous nommez... ain-color''** (couleur principale, en anglais).
</note>
Le nom de la variable vous indique que son rôle... !
===== Créez des ombres avec une mixin =====
<note>
En programmation objet, on dit un **ensemble de
Améliorez vos mixins grâce aux fonctions ======
Notes et transcriptions du cours [[https://openclassro... e boîte à outils mais une grande, la totale ! 🛠
<note>
Si vous y jetez un œil, vous découvrirez qu’il y... ules/color|uniquement dédiés aux couleurs]] ! 🎉
</note>
On appelle ces outils des **fonctions**.
En pr... entation/modules/color#darken|documentation]] !
<note>
La documentation, c’est le mode d’emploi, un peu
html}}
====== Définissez des priorités ======
Notes et transcriptions du cours [[https://openclassro... v style="background-color: red;"></div>
</code>
<note warning>
On vous déconseille très fortement ce st... t reste LA règle de base pour un code organisé.
</note>
==== 2 - Les id ====
Les ''id'' sont uniques. ... ent, par définition, être utilisés qu’une fois.
<note>
Il est toujours judicieux de revoir les bases po
==== Passez au niveau supérieur avec Sass ======
Notes et transcriptions du cours [[https://openclassro... nctuation vous permet aussi d’écrire plus vite.
<note>
Entre nous, il est assez rare que vous tombiez s... lerons, il s’agira de .scss et de sa syntaxe.
</note>
===== Découvrez les fonctionnalités de Sass ==... white;
text-shadow: 10px 10px red;
}
</code>
<note>
Il existe de nombreuses fonctionnalités Sass à d
====== Déployez votre code Sass en ligne ======
Notes et transcriptions du cours [[https://openclassro... Comment faire ?
En lisant la documentation 😊 !
<note>
En fonction de vos OS, l’installation varie. Rep... ss-lang.com/install|documentation officielle]].
</note>
Vous pouvez installer Sass sur Windows, Mac ou ... ’est tout bon ! 🎉
===== Allez plus loin =====
<note>
Pour les besoins du cours, nous avons omis de pa
ss html}}
====== Simplifiez votre code ======
Notes et transcriptions du cours [[https://openclassro... rents. Tous ? Vraiment ? Pas si sûr. On peut déjà noter quelques ressemblances : la couleur, la taille… ... lecteurs.
===== Combinez les sélecteurs =====
<note>
En CSS, les sélecteurs sont utilisés pour cibler... JavaScript. Jetez-y un œil, ça vaut le détour.
</note>
Prenons par exemple notre bouton aux angles arr
}
====== Clarifiez votre HTML avec BEM ======
Notes et transcriptions du cours [[https://openclassro... votre code est plus organisé et compréhensible.
<note>
D’ailleurs, notez bien, c’est important : les sélecteurs BEM sont toujours implémentés sous forme de classes.
</note>
Mais pourquoi ? 🤔
Vous devez être sûr que **vo
