.Merci beaucoup, Quentin, pour cette introduction BEM en Français{
BEM est un système très simple, et le nommage est bien plus fluide (je trouve) sans les Imbrications.
Se relire est plus facile, changer le html sans rien toucher au CSS est un petit bonheur, et ça démystifie un peu le langage dev en le rendant accessible.
En plus d'être une débutante en dev, j'ai une dyspraxie légère (problème de repérage visuo-spatial, je me perds facilement sur les pages).
J'ai donc cherché des conventions de nommage, afin que mon cerveau dys puisse interpréter leur lecture et lire du code sans les mélanger. Et là, BEM! Depuis, je m'y retrouve à 100%, c'est un miracle.
Ai donc fait tout le projet 1 Webagency intégralement en BEM et suis un peu inquiète car c'est encore la norme d'utiliser beaucoup d'ID... ou bien d'utiliser les classes en mode "usage multiple", plutôt qu'en mode "usage unique".
Je ne sais pas trop comment un mentor validateur rompu aux ID et aux NIDS va recevoir mon travail, alors je me permets de te poser une question :}
Selon toi, pourquoi cette méthode n'est-elle pas plus couramment enseignée ?
Merci pour ces infos ;-) mais j'ai parcouru déjà toute la doc (intelligible à mon niveau..)
En anglais aussi, ça ne me pose pas de problème; mais bon, on ne croule pas sous les exemples non plus! Je me suis renseignée sur BEVM aussi, ce vers quoi je tendais naturellement, encore plus logique...
Et il y a quand beaucoup de pontes en la matière, pas dyspraxiques, pas du tout débutants qui recommandent BEM.
Je vois bien le côté ultra-pratique, mon mentor est lui-même ok avec le fait que j'utilise cette méthode; c'est en discutant qu'il m'a aiguillé sur cette voie.
Je comprends instinctivement et en lisant combien ça peut m'apporter, gain d'organisation et réutilisation, SASS etc.
Ceci-dit, je n'ai pas de recul suffisant sur le dev pour répondre en comparatif! ( je débute +3mois ).
Donc, Lucky, selon toi, pourquoi cette méthode, si légère, n'est-elle pas plus présente dans les projets ?
Parce que euh...j'ai la trouille en fait que cette méthode soit mal considérée et que ça puisse impacter la soutenance :
j'ai 3 ID en tout et pour tout... et le reste est en class nominatives et non imbriquées...
En regardant bien Bem n'a rien d'extraordinaire, juste une simplification dans lisibilité des class (parent-enfants) , je pourrait très bien créer ma propre organisation moi aussi, certaines boîtes ont leur propre convention de nommage, c'est aussi valable pour les variables, mixins, fonctions sous Sass.
Il y a aussi des sites sous Bootstrap <4 , d'anciens site que personne ne touche, mais en consultant le css de sites sérieux et récent tu vas retrouvées cette forme.
En effet j'ai découvert Bem sur ce forum, pourquoi avoir la trouille pour ta soutenance, au contraire en expliquant bien que tu utilises un standard moderne pour la lisibilité/organisation est une plus-value
Sinon oui les class pour le CSS, les ID pour les #ancres.
ps: je ne sais pas si j'ai répondu à ta question...
Alors là, c'est exactement ce qu'il me fallait comme explication:
le poids ! 1 10 100!
A partir de là, c'est imparable comme argument, vu qu'il faut tout alléger... Ai lu avec attention les 2 premiers liens et tout ce qu'ils contiennent est très enrichissant.
(ET j'adore la version explicative des chatons, des chauves souris et des pandas roux. Ahah... l'humour déployé par certains dev pour rendre tout ça plus digeste...)
Ma dyspraxie ne m'a jamais fermé les portes et il se pourrait bien qu'elle finisse par m'aider un peu. A force d'avoir lutté pour rendre lisible des supports surchargés ( études, docs etc, ), j'ai pris le pli de remettre à plat les méthodes d'apprentissage. Dans ma formation, pas le choix au début: je ne pouvais pas interpréter les imbrications.
Et là, encore, merci OC et mon mentor de ne pas avoir sabré mon élan.) A présent, je peux lire, comprendre (voir même si on m'y oblige, écrire comme les autres dev )sans BEM mais j'y vois tellement plus d'avantages ;-)
Et en plus, tu m'as permis de gagner en confiance.
Je vais lire le SMACSS dès que j'en ai fini avec WebAgency.
Un petit bout de mon code en exemple, j'ai l'impression que mettre des Majuscules en début de classe n'est pas l'usage. Ce n'est pas interdit, quoique...je lis un peu de tout... Pour l'instant , ça m'aide à ne pas m’emmêler entre les sélecteurs HTML et les classes qui leur sont liées en CSS. Je pourrais m'en passer, mais c'est plus lisible pour moi.
Mais attaquer avec .Body, suis pas sure que ça passe. Votre avis ?
Acceptable ?
Trop moche ?
On s'en fiche ?
Animal inconnu que Lamecarlate n'aurait pas encore listé...?
Perso BEM te permet une lisibilité dans la hierarchie de tes class (si je puis dire ainsi), donc moi je fait tout en minuscules, que ce soit pour les class, id, nom de fichiers et images, dossiers, etc et etc... de plus l'environnement windows est différent de Linux (hébergement)
Par conte j'utilise parfois le camelCase en POO (class, nommage de fonctions, les constantes) et parfois pour les variables en JS ou sous Sass.
ex:
let foo = string_seach_value ou string_searchValue
let bar = int_range_value ou int_rangeValue
Mais bon Je tiens cette technique du monde de l'automatisme
Bref la c'est ma convention habituelle, donc je me repère facilement.
Je suggère aussi tout en minuscule, le risque d'oublier une majuscule en route est trop grand à mon sens. Mais c'est selon tes préférences.
Par contre, je suis surpris que tu avances la question de la lisibilité. Tu es sensé(e) coder sur un éditeur (voire un IDE), avec une coloration syntaxique, et la différence est généralement très marquée :
Même au milieu d'un long sélecteur (ce qu'il faut éviter en général):
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Vivement que je m'améliore! variables et pseudo-classes...., ça semble pratique et facilement assimilable!
2 / Je serai bien restée en CamelCase, mais autant sauter le pas, en fait.
Vos deux conseils me font donc opter pour les minuscules. Je vais essayer. Ça accroche moins l'oeil, mais mieux vaut s'appliquer une bonne fois que de se relire désespérément.
rhoo-Manu,
Ah mais quel honneur!
3 / Alors, les couleurs ne me guident pas malheureusement, elles me perturbent en fait. (Je sais, c'est contraignant!! Du coup, les couleurs sous Sublim text me sont inutiles car je n'automatise pas la Coloration ET la Syntaxe : c'est une étape de trop pour ma frêle cervelle... En fait, je peux le lire mais comme quelqu'un qui réfléchirait à chaque fois pour savoir ..
où est la droite de ta gauche... ? ? )
Pour en revenir à BEM, cet article sur ton blog est limpide! Vivement que je colle mes enfants en colo afin de parcourir tout le reste plus attentivement ;-)
Et oui, tu expliques très bien.
D'ailleurs sur la question des pseudo-class, ton post est quand même plus respectueux des animaux.
Je m'explique : quid du poids des pseudo-class ? la chauve-souris mute ? l'espèce n'est pas répertoriée ? ou bien mange-t-elle le chaton ? !!! c'est une épineuse question.
ou alors, il faut militer auprès de Lamecarlate pour un nouvel animal ?...!
Un grand merci encore à tous les deux,
Voilà donc encore bien des perspectives à travailler : je ne sais pas où mon mentor (le pauvre) va encore me repêcher ;-)
Méheu mes animaux étaient là pour faire rire la galerie, c'est tout
(et sinon, la pseudo-classe ayant le même poids, la même spécificité qu'une classe, on va dire que c'est une chauve-souris frugivore plutôt qu'insectivore)(ouiiii je sais qu'il existe des grosses et des petites chauve-souris, voir ma première phrase dans ce message )
Alors, les couleurs ne me guident pas malheureusement, elles me perturbent en fait.
Tu fais de la synesthésie ? Je demande ça parce que tu pourrais associer des couleurs et des lettres et/ou des chiffres et donc être perturbée par des lettres colorées autrement qu'à ton habitude.
En déclarant une variable dans la pseudo-classe :root
Ahhh les "variables CSS", ou plutôt "propriétés personnalisées" (c'est leur vrai nom, générique à souhait, je trouve ça personnellement dommage, mais paraît qu'il y a de bonnes raisons derrière), c'est tellement cool !
Vos deux conseils me font donc opter pour les minuscules. Je vais essayer. Ça accroche moins l'oeil, mais mieux vaut s'appliquer une bonne fois que de se relire désespérément.
Courage ! (si ça peut aider, il semble que la syntaxe s'appelle kebab-case, je ne sais pas pourquoi mais c'est marrant)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Quel impair j'ai commis! Je te présente mêêêês sincères excuses!
Je découvre en parcourant tes blogs que tu as au moins autant d'animaux que moi et un véritable respect pour eux, of course, c'était pure plaisanterie!
Suis ravie que tu sois sortie de ta tanière...
Oui en effet tu m'as fait plus que rire, c'est une approche très ludique!
Et aurais-tu des supers pouvoirs ? Je travaille sur la création d'un dispositif complètement lié à la synesthésie. Peux pas en dire plus ici, mais c'est sur ordi....
Tout est lié, me diras-tu, BEM, l'accessibilité...
La prochaine étape, quand j'aurai décollé du projet 1, c'est de l'expliquer à mon fils dys de 10 ans qui, lui, n'écrit PAS DU TOUT à la main.
Son ordi est sa main d'ailleurs. Je voudrai être capable d'aider les enfants dys à développer des sites légers et simplissimes. Créateurs et acteurs de leurs supports, ça redistribue les cartes!.
(Quelque chose de très intuitif que même les prof rétifs à l'informatique pourraient utiliser en classe, sans que ça exige 3mois de formation... )
Rien ne presse, suis vraiment catégorie vers de terre en DEV: il y a 3 mois, j'avais des sueurs froides juste en déplaçant des dossiers et je développais une douce phobie des transferts de fichiers. (si-si, les deux sont possibles!)
ça-va-beaucoup-mieux-merci! grâce à BEM, c'est clair.
Par exemple : erreur de débutante: boulette n°000 : pas de sauvegarde!
Mon fidèle ordi, alors que j'avais fini le projet 1, (7 semaines de labeur en tirant la langue sur chaque div) est subitement mort. Personne n'a pu le ranimer... Et bien, j'ai tout refait en flex et Bem en 3X 4heures. Trois après-midi - versus 2 mois!
S'il y a automatisation chez moi, c'est que la méthode est fluide.
Re-baptisée d'abord BLIM : Block__Largement-Indexés--Modifiable) avant de revenir dans le cadre parce que bon, ce serait carrément prétentieux pour une poussine et puis les dyspraxiques ont tendance à griller les étapes dès qu'ils ont une solution de facilité.
Maintenant, ce que j'aime ici c'est qu'on est pas obligé d'escalader la montagne du développement par la face nord.
J'ai un mentor d'acier, assez futé, (pour ne pas dire très), qui code depuis 10 ans,même s'il en a 23 je crois,
mais... il n'avait pas encore entendu parler d'élèves "BEMant" la WebAgency.
Vos conseils décontractés et pointus m'ouvrent donc la possibilité de défendre ce projet sous l'angle bem-intégrateur.
Et puis, surtout d'avoir découvert que chauve-souris venait littéralement de "chouette"-souris.
ainsi que : Animal qui vole avec les mains!!! La classe!
on ne peut pas en dire autant des pandas roux! ;-)
On sent ta motivation, ta curiosité est plutôt encourageante pour la suite.
Navré pour la perte de ton travail, oui il faut toujours faire une sauvegarde régulière, sois sur un support externe, le cloud, mais il existe d'autres façons..
> Quel impair j'ai commis! Je te présente mêêêês sincères excuses!
Meuh non, tout va bien
> Et aurais-tu des supers pouvoirs ?
Pas du tout La synesthésie m'intéresse - notamment parce que je fais moi-même une très légère association couleurs-lettres, mais qui reste uniquemnt du "bonus".
Pour le reste, j'agrée avec Lucky13 !
Et au plaisir de te lire encore ici, pour suivre le projet du dispositif dont tu parles :3
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Et moi qui poste si rarement sur les forum! (par timidité et peur des fausses manœuvres!)
Merci du soutien, Lucky. J'étais dans un drôle d'état lorsque j'ai perdu mes données et ici dans ma Bretagne Sud, peu, très peu de contacts/ réparateurs! Je n'ai pas trouvé d'experts en la matière pour récupérer les données, et il m'en manque, malgré mes sauvegardes.... Si vous connaissez quelqu'un de confiance, je prends toutes les adresses!
En plus , mon prototype de projet est collé dessus, en fait.
suis en tentative de dépôt de brevet, prototypes ok, un dernier voyage en Inde pour les planches finales, en février puis ULULE pour un petit coup de pouce, ou bien directement un chouette site....
Bon, mais enfin, quel ce projet ?
Quand je vous dis "sur l'ordi", il s'agit de "sous vos doigts" plus exactement.
Ni plus ni moins que de se réapproprier le clavier, en fait:
On a le droit d'écrire vite, sans réfléchir à chaque fois où l'on pose ses doigts, non ?
Au départ pour les enfants dys, puis à force d'entendre, "oh, je voudrai le même pour ma mère, ma clerc de notaire, pour mon assistant qui a fait 5 ans d'études et qui frappe toujours à 9/mots minute, etc, ", j'ai fini par en sortir plusieurs exemplaires, lors d'un séjour en Inde.
"La présente invention (pff) concerne un dispositif d'apprentissage infus ( sans rien faire de plus) de la frappe polytactile sur clavier au moyen de caractères avantageux ( rien que ça) associés à ....une couleur prédéfinie ( synesthésie!)"
je vous fais grâce du reste, mais en gros le but c'est une aide visuelle pour tout ceux qui regardent encore le clavier en frappant et qui malgré le temps qu'ils y passent, n'automatisent pas la frappe ...et continuent à écrire avec 4 doigts!
ou ceux qui trouvent les glyphes du clavier trop petits. Ou ceux qui se perdent dans les MaJ/ ponctuation.
Ou ceux qui trouvent leur clavier impersonnels et aimeraient avoir une typo personnalisée...
Bref, c'est en couleur, ça prend donc la taille d'une touche et ça pourrait se décliner en étiquettes, en protège-clavier... etc.
Voilà ,en stretch donc, le projet TAPOTEUR ! Liberté pour les Caractères du clavier!!!
Changeons du sujet ;-) Merci d'avoir tenu jusque là!
Lucky, je ne sais pas ce que tu en penses, mais ...
Lamecarlate et Rhooh-Manu,
Vous devez être très occupé également,
Pourtant...
Vous devriez vraiment creuser l'idée du bestiaire ! Pas uniquement pour le poids mais aussi pour leurs valeurs et les propriétés...
Parce qu'au niveau pédagogique, c'est très attrayant, très parlant, facile à retenir!
Serai ravie de poursuivre cette discussion!
Suis obligée de filer : session dans 30mn! Encore un break-point à finir pour le projet 1 et puis verdict vers la fin du mois!
Je vais tester toutes ces réflexions de chauve-souris sur mon mentor ;
Il est plutôt panda.
Pas roux du tout.
Advienne que pourra ;-)
Astrid
BEM, une bonne pratique CSS
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)