Development #64513
Ajouter des classes BEM sur la navigation
0%
Description
Pour simplifier la personnalisation de la navigation, il serait intéressant d'ajouter des classes BEM aux différents éléments.
Fichiers
Demandes liées
Historique
Mis à jour par Corentin Séchet il y a environ 2 ans
- Fichier 0001-templates-add-BEM-classes-to-navigation-64513.patch 0001-templates-add-BEM-classes-to-navigation-64513.patch ajouté
- Tracker changé de Support à Development
- Statut changé de Nouveau à Solution proposée
- Patch proposed changé de Non à Oui
Pas sûr de ce qui serait le mieux, je me perd un peu dans la sémantique nav / nav-wrapper / menu.
Mis à jour par Frédéric Péters il y a presque 2 ans
Pour menu.html, s'il ne s'agit que d'ajouter des classes, plutôt faire ça sur combo/public/templates/combo/menu.html dans le dépôt combo, qu'avoir une version dupliquée ici.
Mais attention ici BEM qui va donner la fausse idée que .nav--menu s'appliquera à la navigation, alors que ça s'appliquera aussi sur une cellule menu qui serait posée en barre latérale ou pied de page.
Mis à jour par Corentin Séchet il y a plus d'un an
- Lié à Development #68106: Ajouter des classes BEM sur les menus ajouté
Mis à jour par Corentin Séchet il y a plus d'un an
Mis à jour par Thomas Jund il y a plus d'un an
J'ai l'impression que tu compliques plus que tu ne simplifies.
Pour moi la class element "gru-nav" me convient, elle est unique et peu continuer à identifier la nav du site. Et cela permet de ne pas tout remplacer côté CSS.
Le principal objectif de l'ajout de class à un element est de pouvoir derrière réduire la specificité des selecteurs. Et donc d'essayer de se rapprocher de 1 seule class pour selectionner un element.
Dans le cas de la nav, on a déjà des class à identifiant unique : .gru-nav, .gru-nav-wrapper et .gru-nav-button.
Pour les rendre compatible avec la syntaxe de Publik, il suffirait simplement de séparer l'identifiant Element du suffice enfant. Et pas bien grave si le wrapper n'est pas enfant.
.gru-nav--wrapper
.gru-nav
gru-nav--button
Mais dans un premier temps, on pourrait commencer à simplifier les selecteurs coté CSS avec l'existant :
- remplacer `div.gru-nav` par `.gru-nav`
- remplacer `div.gru-nav-wrapper` par `gru-nav-wrapper`
- remplacer `div.gru-nav .gru-nav-button` par `.gru-nav-button`
Bref, je trouve que pour le moment ce ticket a peu d'intérêt (comparativement à #68583)