Carnet Wiki

Nommage des classes Z

Version 10 — Mai 2011 — laurent

Rien de ce qui figure sur cette page n’a été validé. Ce sont des éléments de réflexion

Cette page sert à mettre en commun les éléments de réflexion sur le nommage des classes Z :

  • non encore fixées
  • déjà présentes mais qui seraient à reformuler

Lorsqu’un choix est défini et intégré dans les squelettes, il faut l’enlever de cette page Et les mettre dans un vrai article de doc peut être !.

Structure, blocs principaux

La structure du body mériterait des sélecteurs + usuels que ceux actuels : header, navigation, content et footer sont déjà utilisés dans de nombreux thèmes et frameworks, notamment dans les modèles Layout Gala qui servent de référence à la dist depuis 2007.

+ utiliser des class plutôt que des identifiants facilite la surcharge

Homogénéisation des différents types de listes

Actuellement :

  • menu / menu-liste / menu-entree
  • liste / liste-items / item
  • comments / comments-list / comment

Proposition :

  • menu / menu-items / item
  • liste / liste-items / item
  • comments / comments-items / item

Il n’est pas possible de faire directement une sélection « .liste .items » car l’élément de plus haut niveau (menu, liste) n’est pas obligatoire. Il sert à pouvoir inclure un titre en plus de la liste elle-même.

Attention, pourquoi les commentaires (comments) ? Et s’ils sont en tableau, et non en liste, pour former un forum ?

Différence entre Zpip v1 et Menus concernant la classe « on »

Lorsqu’une rubrique est exposée, Zpip v1 mets la class « on » sur le <a> : <li class="menu-entree"><a href="lien" class="on">Texte du lien</a></li> tandis que Menus mets la class « on » sur le <li> : <li class="menu-entree on"><a href="lien">Texte du lien</a></li>.

L’idée de Rastapopoulos est de pouvoir cibler en CSS les sous-éléments de la rubrique en cours pour faire un affichage différent au besoin.

Mais, du coup, pour afficher en gras seules les rubriques exposées, il faut donc faire en CSS .menu-entree.on > a {font-weight: bold;}. Car .on {font-weight: bold;} met toute la branche en gras.

Préfixage dans les classes CSS

  • Dans le body, le préfixe se fait avec un underscore « _ » : page_sommaire.
  • Dans les listes, il se fait avec un tiret « - » : menu-liste, liste-items.

Là encore, cela demanderait à être homogénéisé.

Romy suggère (et applique depuis longtemps, autant que possible) ces nomenclatures (autant pour les noms de fichiers que les sélecteurs CSS et les chaines de langue) :
-  autant que possible, nommer de même le sélecteur css, le fichier image et la chaîne de langue qui s’appliquent au même endroit
-  commencer le nom par son radical, éviter les prefixes => c’est plus facile à relire/comprendre lorsque c’est classé par ordre alphabétique
-  séparer le suffixe par un tiret (idem pour le prefixe s’il y a en), typiquement pour ajouter un numéro identifiant (exemple)
-  le underscore est réservé au radical, si nécessaire

Système de boite personnalisable

Système de colonnes internes à un bloc

Fil d’ariane

Commit [39664] : ajoute un span class=« sep » sur les séparateurs des fils d’ariane

Remarque de Fil sur la liste spip-zone :

Super, le .sep est bien utile, mais j’aimerais aussi pouvoir adresser
en css facilement :

-  le lien « retour accueil »
-  le premier sep
-  le lien « titre de cette page »
-  le dernier sep

actuellement je fais :

#hierarchie > strong.on {display:none}
#hierarchie :first-child { display: none }
#hierarchie .sep:nth-of-type(1) { display: none }
#hierarchie .sep:nth-last-of-type(1) { display: none }

remarque de joseph :

le lien ’retour accueil’ n’est pas forcément le premier. Si je décide de ne pas le mettre dans ma boucle hiérarchie, alors le premier lien sera celui du secteur.

Afin qu’un thème puisse être compatible avec tous les cas, il vaudrait mieux avoir un identifiant CSS plutôt que se baser sur la position qui ne vaut que pour le squelette de base de Zpip.

ça marche sur les navigateurs modernes, mais ça pourrait sans doute
être plus simple.


marcimat

Je tentais de dire tout à l’heure que c’est bien de pouvoir sélectionner tous les blocs conteneurs, tous les items de liste d’un coup aussi, plutot que d’avoir à écrire .truc-items, .chose-items, .belette-items et que donc, quelque chose comme cela me conviendrait mieux :

  • bloc menu / items menu-items /item
  • bloc liste / items liste-items /item
  • bloc commentaires / items commentaires-items / item

Romy : bonne idée, mais attention : .bloc est déjà couramment utilisé pour la mise en page. Un webmestre peut avoir ainsi nommé ses blocs principaux et se trouver bien embêté qu’un plugin introduise un .bloc dans un .bloc... pour éviter ça, mieux vaut distinguer ce qui structure (reste dans le layout, nommage générique, libre) de ce qui ajoute une fonctionnalité (souvent en inclure, nommage spécifique, imposé), quitte à avoir un peu plus de div imbriquées que théoriquement nécessaire.

joseph

A été évoqué sur la zone le fait que certaines listes soient des listes simples alors que d’autres proposent un résumé de l’objet. Dans Zpip de base, les listes d’articles sont des listes de résumés tandis que les listes de brèves sont des listes simples. Du coup, les thèmes proposent souvent des CSS différentes pour la liste d’articles et les autres listes d’objets. Sauf qu’un autre squelette peut préférer fournir une liste de résumés également pour les rubriques.

Il faudrait donc distinguer en CSS les « listes de résumés » des « listes simples ». cela permet de modifier ces squelettes tout en gardant la compatibilité des thèmes.

Faut-il également prévoir des listes de vignettes (comme pour sur la page des contributeurs sur Contrib) ce qui impliquerait un troisième type de liste ? J’ai essayé de le faire dans Aveline avec la noisette liste_auteurs.html et cela impliquait de rajouter des éléments CSS inline car ce type de liste n’est pas prévu par les thèmes.

Forum de discussion

Harmoniser la nomenclature des forums et l’organisation des contenus entre Zpip et Comment. Par exemple, le logo de l’auteur est placé dans .comment-meta dans Comment alors qu’il est dans .comment-content dans Zpip.

Par ailleurs, peut-on prévoir des classes CSS (sur l’ul principal) précisant si les messages sont organisés en thread complets, en threads simple (comme sur Contrib, les messages se suivent au sein d’un même fil) ou en un seul fil (comme sur spip_blog) ?