Recherche avancée

Sur d’autres sites (10737)

• Evolution #4391 : Squelettes de la dist : améliorer le markup et passer à BEM

  14 octobre 2019, par tcharlss (*´_ゝ｀)

  j’utiliserais plutôt un modifier de "menu__item" : <li class="menu__item menu__item--plan"></li>

  Cf. remarque de RastaPopoulos (qui a posté pendant que j’écrivais ma réponse :p)
  Il y a encore beaucoup de guides officieux qui ne sont pas à jour sur ce point.
  Le guide officiel : https://en.bem.info/methodology/naming-convention/

  Pas de HTML5 pour l’instant.

  Pourquoi ?

  Je pensais qu’il y avait encore des points bloquants ou tout du moins genants, mais finalement ça ne semble pas être le cas.
  Donc go go go pour le HTML5, mieux pour la sémantique et l’accessibilité.

  Classes en english avec des exceptions en français

  Why ?

  Français ou anglais, ou mélange des 2, je n’ai pas d’avis vraiment tranché là dessus. Est-ce qu’il y a un consensus à ce sujet ? (dans ce cas, on continue comme ça et on en parle plus :p)
  Mon avis en 2 mots, c’est que c’est en général moins verbeux, et ça rend le code accessible aux non francophones.

  Je ne pense pas que la version cible est la 3.3, 3.4 ou plus à la limite

  Ok pour 3.4. Mais on ne sait jamais, ça pourrait être prêt avant :)
  Je te laisse modifier, j’ai pas le droit d’éditer le ticket.

  pensez-vous que BEM est un truc utilisé par les personnes qui bidouillent leur site à partir de la dist ?

  Bis, cf. remarque de RastaPopoulos qui poste plus vite que son ombre concernant les perfs.
  C’est juste un standard parmis d’autres (OOCSS, SMACSS...), mais il me semble que c’est un des plus simples et un des plus utilisés.

  Après, je ne pense pas que ça forcerait les gens qui bidouillent la dist à l’apprendre et à l’adopter.
  Ce ne sont que des noms de classe, même sans connaître BEM et comprendre comment ces noms sont construits, ça n’empêche pas de bidouiller les styles.

  Rangement¶

  Il y a un autre point que je n’avais pas abordé, c’est le rangement des squelettes.

  Je pense que les listes d’objets pourraient être mutualisées comme dans spipr, en ajoutant 2 dossiers et en y créant ces squelettes :

  • inclure/liste/
    • articles.html
    • rubriques.html
    • etc.
  • inclure/resume/
    • article.html
    • rubrique.html
    • etc.

  Après, je me demande si on ne pourrait pas aller plus loin, et reprendre le rangement de z-core pour les blocs principaux.
  Attention, je parle bien uniquement de rangement, pas de mettre z-core en dépendance.

  C’est à dire concrètement :

  • header/
    • dist.html
  • footer/
    • dist.html
  • content/
    • sommaire.html
    • article.html
    • rubrique.html
    • etc.
  • aside/
    • sommaire.html
    • article.html
    • rubrique.html
    • etc.

  Ce qui fait que le squelette des pages en serait simplifié, exemple pour sommaire.html :
  

  <span class="CodeRay"><span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">page</span><span class="delimiter">"</span></span><span class="tag">></span>
  
  
  
      <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">header</span><span class="delimiter">"</span></span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">header</span><span class="delimiter">"</span></span> <span class="attribute-name">role</span>=<span class="string"><span class="delimiter">"</span><span class="content">banner</span><span class="delimiter">"</span></span><span class="tag">></span>
  
          <span class="tag">span><span class="error">{</span><span class="attribute-name">fond</span>=<span class="attribute-value">header</span><span class="error">/</span><span class="attribute-name">dist</span><span class="error">,</span> <span class="attribute-name">home</span>=<span class="attribute-value">oui</span><span class="error">}</span> <span class="tag">/></span>
  
      <span class="tag"></span>
  
  
  
      <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">content</span><span class="delimiter">"</span></span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">content</span><span class="delimiter">"</span></span><span class="tag">></span>
  
  
  
          <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">main</span><span class="delimiter">"</span></span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">main</span><span class="delimiter">"</span></span> <span class="attribute-name">role</span>=<span class="string"><span class="delimiter">"</span><span class="content">main</span><span class="delimiter">"</span></span><span class="tag">></span>
  
              <span class="tag">span><span class="error">{</span><span class="attribute-name">fond</span>=<span class="attribute-value">content</span><span class="error">/</span><span class="attribute-name">sommaire</span><span class="error">,</span> <span class="attribute-name">env</span><span class="error">}</span><span class="tag">></span>
  
          <span class="tag"></span>
  
  
  
          <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">aside</span><span class="delimiter">"</span></span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">aside</span><span class="delimiter">"</span></span><span class="tag">></span>
  
              <span class="tag">span><span class="error">{</span><span class="attribute-name">fond</span>=<span class="attribute-value">aside</span><span class="error">/</span><span class="attribute-name">sommaire</span><span class="error">,</span> <span class="attribute-name">env</span><span class="error">}</span><span class="tag">></span>
  
          <span class="tag"></span>
  
  
  
      <span class="tag"></span>
  
  
  
      <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">footer</span><span class="delimiter">"</span></span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">footer</span><span class="delimiter">"</span></span> <span class="attribute-name">role</span>=<span class="string"><span class="delimiter">"</span><span class="content">contentinfo</span><span class="delimiter">"</span></span><span class="tag">></span>
  
          <span class="tag">span><span class="error">{</span><span class="attribute-name">fond</span>=<span class="attribute-value">footer</span><span class="error">/</span><span class="attribute-name">dist</span><span class="error">,</span> <span class="attribute-name">self</span>=<span class="error">#</span><span class="attribute-value">SELF</span><span class="error">}</span> <span class="tag">/></span>
  
      <span class="tag"></span>
  
  
  
  <span class="tag"></span>
  
  </span></span></span></span></span></span></span></span></span></span></span>

  Bon, je sais pas, je réfléchis tout haut.
  Peut-être que ça pourrait apporter aussi un peu de confusion.

  Branche et dépôt GIT¶

  Concernant le dépôt, je n’ai pas les droits pour créer une branche sur https://git.spip.net/SPIP/dist , du coup je bosse dans un fork : https://git.spip.net/tcharlss/dist/src/branch/bem

  Pour celleux intéressées à contribuer, c’est quoi la meilleurs méthode ? Je vous ajoute comme collaborateurs sur ce dépôt ?
  Ou alors il faut faire une vraie branche 3.4 dans le dépôt de l’orga SPIP ?

• Evolution #4391 : Squelettes de la dist : améliorer le markup et passer à BEM

  14 octobre 2019, par RastaPopoulos ♥

  @nico le "plan" est bien un modifier chez tcharlss, dans BEM il n’y a plus "—" depuis pas mal de temps dans la doc officielle. La version en cours c’est DEUX "_" = un sous-élément, UN "_" = un modifier. :)
  Les tirets ne sont plus utilisés que pour séparer les termes multi-mots (comme le disait tcharlss plus haut, à la place du camelCase).

• Evolution #4391 : Squelettes de la dist : améliorer le markup et passer à BEM

  14 octobre 2019, par nicod _

  Par contre, contrairement à ta proposition, où tu définis un nouvel élément "menu__item_plan" :

  <li class="menu__item menu__item_plan"></li>

  j’utiliserais plutôt un modifier de "menu__item" :

  <li class="menu__item menu__item--plan"></li>

  Remarque hautement philosophique, je le reconnais :)
  Mais tant qu’on évite la cascade, on y gagnera.