Comme ça, sans trop entrer dans les détails, il faut éviter ce genre de choses :
.sidebar ul li {
/* ... */
}
Tu perds le contrôle sur les listes imbriquées, et ça t'oblige à faire des surcharges qui compliquent beaucoup ton code. Donc deux solutions :
- Soit tu utilises le sélecteur enfant direct >
- Soit tu nommes tous tes éléments HTML par des classes
Personnellement je suis un grand partisan de la deuxième solution, car la première implique des sélections très complexes qui, en regard de la priorité, sont des calamités. Par exemple, si je veux mettre un fond rouge à une liste imbriquée en particulier, selon le principe de priorité, je serai obligé d'utiliser un sélecteur ayant autant ou plus de poids. Exemple :
.sidebar > ul > li > ul {
background: red;
}
/* Je veux maintenant surcharger pour un style en particulier */
.sidebar2 > ul > li > ul { /* .sidebar2 a également la classe .sidebar ; je suis obligé de donner le même type de sélecteur pour surcharger le style */
background: blue;
}
Alors qu'en donnant des classes à tous les éléments HTML :
<nav class="sidebar">
<!-- liste niveau 1 -->
<ul class="sidebar-list">
<li class="sidebar-item">
</li>
<li class="sidebar-item">
<!-- liste niveau 2 -->
<ul class="sidebar-sublist">
<li class="sidebar-subitem">
</li>
<li class="sidebar-subitem">
</li>
</ul>
</li>
<li class="sidebar-item">
</li>
</ul>
</nav>
Je peux donner les styles tranquillement sans complexifier mon code :
.sidebar-list {
background: red;
}
.sidebar-sublist {
background: blue;
}
Je t'invite à chercher du côté de BEM par exemple, qui est une méthode de travail en CSS qui permet d'organiser son code très simplement et de garder le contrôle. Comme disait l'autre, CSS c'est facile à apprendre, mais très compliqué à organiser.
PS : si tu repasses en France, y a pas de soucis pour une bonne bière. ;)