HTML : nom des classes et attributs

YannisDelmas commented 2 years ago

nommage des classes HTML : classes de catégories, classes de qualité, classes d'état (attributs pour les autres propriétés)

bien utiliser les attributs ARIA quand ils existent (à lister). Le HTML (v5.2) ne retient pas les microformats dans le standard, mais le signalent comme une "extension" (§1.7.3). On pourrait le voir également comme une application.

Exemple des autoliens: self-link en class est correct, mais comme bookmark existe en rel, autant l'utiliser. Le sélecteur CSS est moins élémentaire ([rel~=bookmark] au lieu de .self-link), mais le code HTML est plus standard/général et ne demande pas qu'on spécifie la sémantique de la classe.

enguerranws commented 2 years ago

C'est un sujet assez délicat :)

Dans ce qu'on peut recommander, il y aura un parti pris minimum : nommage sémantique ou non (nommage utilitaire par exemple). J'aimerais qu'on recommande un nommage sémantique, rien que pour le principe de separation of concerns (https://www.w3.org/TR/html-design-principles/#separation-of-concerns), étant donné qu'un nommage utilitaire (ex: mt-3 text-red va à l'encontre de ce principe (et du bon sens, selon moi 🙄).

En ce qui concerne les méthodos de nommage sémantique (BEM, OOCSS, etc), on peut les mentionner, mais ce n'est pas quelque chose qu'on peut vraiment recommander dans le cadre de ce projet : c'est pratique pour la production, ce n'est pas indispensable pour faire du code propre, je pense.

Concernant l'utilisation des attributs dans les sélecteurs, je suis d'accord avec toi, le seul argument que j'aurais contre, c'est que je ne les utilise jamais en production (parce que si quelqu'un reprend le code, je ne suis pas sûr qu'il comprenne ce genre de sélecteurs). Mais la prod, c'est la prod et dans l'absolu, se baser sur des attributs (et leurs valeurs) permet plus de généricité et ça me semble être quelque chose à privilégier dans le cadre de ce projet.

YannisDelmas commented 2 years ago

Je suis d'accord sur le fait d'éviter le nommage non-sémantique. Dans certains cas quelque chose de sémantique peut toutefois avoir une dimension utilitaire. Mon idée est surtout d'utiliser les mécaniques déjà existantes (rel, role, balise, etc.) avant de créer des classes. Je suis d'accord que tout le monde ne les comprend pas forcément bien, mais j'aurais tendance à dire que c'est faute d'habitude. On peut peut-être limiter notre recommandation aux attributs les plus usuels: rel, ARIA et les attributs binaires standards (open, readonly, etc.)?

Quand on crée une classe, doit-elle désigner une (sous-)catégorie (p.ex. "encart" pour préciser aside), une qualité (p.ex. "mis en valeur" ou "nom de personne") ou un état (ouvert/fermé, tag choisi, sélectionné, etc.)? L'idée serait de s'efforcer de se limiter à ces trois options. Le premier type de classes est une sorte d'extension des balises existantes et correspondrait à un "nom commun" dans la métaphore linguistique. Le second rejoint la logique des microformats et correspondrait à un adjectif / complément du nom. Le troisième type est un cas particulier du 2e, mais il est intéressant de le distinguer parce qu'il correspond à une évolution du CSS en cours de discussion.

Concernant les méthodologies de nommage sémantique, j'ai la même appréciation que toi.