Bonjour,
Quelqu'un sur le forum m'avait parlé de conventions de nommage CSS,
et ça m'avait beaucoup intéressé.
Je l'avais plus ou moins adopté à la va vite,
mais maintenant j'essaie de lire plus sérieusement sur le sujet.
J'ai lu quelques articles,
j'ai beaucoup aimé celui-ci :
https://www.alsacreations.com/article/lire/1641-bonnes-pratiques-en-css-bem-et-oocss.html
très bien écrit
Mais je me pose des questions sur la convention BEM.
Si on écrit ce genre de code par exemple :
<button class="MenuBtn MenuBtn--blue">Open</button>Notre site est 'responsive', et quand l'écran est grand, on veut que le bouton soit vert à la place de bleu.
On va être obligé d'écrire ça :
@media only screen and (min-width: $large_screen) {
MenuBtn--blue {
bagckground-color: green;
}
}On a donc une classe qui s'appelle 'blue' qui représente une couleur 'verte', c'est confus...
Peut-être que j'ai mal compris/pensé un truc sur BEM,
comment vous vous en sortez vous ? Vous utilisez BEM d'une manière qui m'échappe, ou vous utilisez autre chose que BEM ?
5 réponses
Salut,
Bof, c'est ton exemple qui rend la chose confuse : tu choisis un nom de classe qui contient une couleur et tu souhaites changer la couleur en fonction de la largeur de la page. De toute façon, c'est extrêment rare qu'on change la couleur d'un élément avec des media-queries.
Qu'est-ce que tu ne comprends pas ?
le "quelqu'un" ça doit être moi :)
En supposant que l'exemple ne soit qu'un exemple, en ce qui me concerne, je fais comme ça :
nom nom--xs-green nom--md-blue
j'ai en général : xs (tel.) / sm (ipad) / md (ecran de portable) / lg (grand ecran fixe)
Selon le design, j'ajuste évidemment les tailles.
Après tu peux faire du générique, et avoir du bg-success / bg-success--md / bg-success--sm (fond vert / fond vert uniquement si ecran moyen et plus / écran vert uniquement ipad et plus)
Bref c'est à toi de définir tes conventions perso :)
Pour reprendre ton exemple du big, le fait qu'il ait cette class doit signfier qu'il sera plus "big" que si tu ne l'ajoutes pas, mais le "big" est relatif à la taille de l'écran.
Sur PC : ton bouton "normal" (sans big) sera plus petit que ton bouton "big"
Sur mobile : ton bouton "normal" (sans big) sera plus petit que ton bouton "big", MAIS le bouton "normal" (voir petit) de la version PC pourra quand même être plus grand que le bouton "big" sur la version mobile.
Je ne sais pas si je suis clair ;)
Tu as de toute manière 2 choix (qui peuvent parfaitement cohabiter !) :
Soit tu définis une class et tu ajoutes des media query
Soit tu définis des class spécifique pour chaque taille (qui ne s'active que si tel ou tel @media query est valable).
On utilise généralement le 2eme cas pour les cas "génériques", le plus courramment utilisé est évidemment les systèmes de grid.
Bof, c'est ton exemple qui rend la chose confuse : tu choisis un nom de classe qui contient une couleur et tu souhaites changer la couleur en fonction de la largeur de la page. De toute façon, c'est extrêment rare qu'on change la couleur d'un élément avec des media-queries.
Effectivement l'exemple parait absurde,
je ne compte pas changer les couleur en fontion de la taille de l'écran c'est vrai, l'exemple est là juste pour donner le principe.
C'est un exemple que j'ai repris de l'article que j'ai mentionné plus haut. Un moment il écrit ça :
<button class="MenuBtn MenuBtn--big MenuBtn--darkBlue">Open</button>Mais si on prend MenuBtn--big par exemple,
on change souvent la taille des éléments en fonction de la taille de l'écran, du coup ça sera peut-être plus parlant.
Donc on a notre bouton "big", et l'utilisateur rétrécit la largeur de son navigateur,
on aimerait donc diminuer la largeur de notre bouton "big",
alors on change l'attribut widthde la class MenuBtn--big, pour lui attribuer une toute petite valeur.
Et je trouve ça bizarre parce-qu'à ce moment, on a une classe qui s'appelle 'big' alors qu'elle a une toute petite valeur.
Ça ne choque personne ?
Moi j'ai un peu de mal, et encore une fois, ce n'est qu'un exemple, j'imagine qu'on pourrait trouver un exemple plus "bizarre".
C'est pour ça que je demande si je suis passé à coté d'un truc...
le "quelqu'un" ça doit être moi :)
Ouais je crois bien que c'était toi ^^
(Encore merci)
c'est ton exemple qui rend la chose confuse
Après tu peux faire du générique
Ouais... À force d'y réfléchir je me dis que je me prends trop la tête, c'est probablement juste que le nom de la classe n'a pas beaucoup de sens...
Je vais appliquer le principe concrètement sur un projet, ça devrait aller.
Ah oui d'accord je comprends mieux !
Moi je voulais changer 'big' dans chaque media query.
Alors que le principe veut plutôt qu'on créer 'small' ET 'big', et faire varier ces 2 classes dans chaque media query.
'small' pourra être "relativement gros" sur un écran large, on s'en fiche ce n'est pas ça qui importe,
l'important c'est qu'on a besoin de 2 type de bouton, l'un toujours plus petit que l'autre.
Je pense que mon cerveau est dénoué. Merci.