@accessiblestef Rigolote la façon de nommer les classes de titrage h1-h6 selon l'ordre des planùtes dans le systùme solaire 🙂

design-system.w3.org/styles/ty

@cssss @nicosomb

@emmanuelc GĂ©nĂ©rateur de confusion sur le long terme, je dirais. Parce que `h1, .h1` c'est assez passĂ© dans les mƓurs. @cssss @nicosomb

@emmanuelc @cssss @nicosomb Je note aussi dans le Design System des permaliens dans les headings avec un `aria-hidden="true"` et ça me semble louche. Peut-ĂȘtre un ticket Ă  venir aprĂšs test avec un lecteur d'Ă©cran.

@accessiblestef @emmanuelc @cssss @nicosomb
Bizarre, chez moi cette page scrolle toute seule en plein milieu du contenu au chargement, chez vous aussi ?
design-system.w3.org/styles/fo
(sauf quand je désactive JS)

@accessiblestef Oui, c'est passĂ© dans les mƓurs effectivement (ici on fait des **-like pour presque toutes les balises).
Mais je ne sais pas : j'aime bien le fait de neutraliser totalement le sens d'un élément. h1.h1 garde encore la sémantique du titre de plus haut niveau.
Nous avons aussi une série de text--size-xs/xl qui pour le coup supprime totalement la notion hiérarchique.
Nous avons ça pour plusieurs éléments. @cssss @nicosomb

@accessiblestef Le h1.h1, c'est déjà une composition, un motif à part entiÚre (taille, graisse, grille, marges, padding).
Disposer d'un p.text--size-xl.b-like par exemple est plus bas niveau et ne simule que la taille + graisse d'un titre par exemple.
(je ne sais pas si tu me suis). @cssss @nicosomb

@accessiblestef oh ben non, c'est un jeu de l'esprit sympa. Ce sont d'autres pans du métier qui sont moins drÎles. @cssss @nicosomb

@emmanuelc @accessiblestef @cssss @nicosomb En gĂ©nĂ©ral, les balises courantes sont stylĂ©es selon le contexte : les h1, ul, p etc ne s'affichent pas de la mĂȘme façon s'ils sont dans un header, un article ou un footer.
Je prĂ©fĂšre donc le plus haut niveau de spĂ©cificitĂ© (BEM) et styler .header__title et .article__title au lieu de h1 tout court (trop gĂ©nĂ©rique bien sĂ»r) ou mĂȘme .h1
Et pour tous les blocs de code qui se répÚtent, des mixins Sass partagées.

@nicod_ Intéressant, merci. Je comprends un peu mieux pourquoi les gens aiment BEM d'un coup. @emmanuelc @cssss @nicosomb

@accessiblestef L'essayer, et comprendre ce que ça résout, c'est l'adopter :)

En fait, on spécifie beaucoup cÎté HTML, en n'utilisant donc quasiment que des classes trÚs ciblées et "uniques".

Ce qui fait qu'on évite les problÚmes liés à la cascade (collisions de styles qui arrivent inévitablement sur un gros projet), qui imposent de redéfinir en surchargeant / ciblant encore plus pointu en CSS, et qui finissent dans un bordel ingérable avec des !important de rage.

@emmanuelc @cssss @nicosomb

@nicod_ celĂ  dit, la cascade me manque 🙂 (en BEM la cascade reste intĂ©ressante au sein d'un motif.) @accessiblestef @cssss @nicosomb

@accessiblestef tu peux avoir les deux conjointement : des styles globaux façon .hx et des composants comme dit @nicod_ Pire, ces composants peuvent mĂȘme tirer les globaux et ajouter/modifier lĂ©gĂšrement leur look. Ça crĂ©e des dĂ©pendances Ă©videmment. @cssss @nicosomb

@emmanuelc Oui, on peut mixer plusieurs techniques, et utiliser des class atomiques raisonnablement, voir la cascade (cas inévitable avec un CMS : .article__text p, par exemple).
Ce qui est bien, avec CSS, c'est qu'on fait un peu comme on veut, on n'a jamais de Fatal Error :D
Mais BEM ça apporte surtout une méthode éprouvée, qui permet de bien maintenir les styles sans tout faire péter à la moindre modif.

@accessiblestef @cssss @nicosomb

@accessiblestef Carrément, c'est rigolo mais super chelou comme idée, et impossible (pour moi) à mémoriser, je connais pas l'ordre des planÚtes...
@emmanuelc @cssss @nicosomb

@nicod_ Moi j'aurais mis Jupiter en h1, vu que c'est la plus grosse 🙂 @accessiblestef @cssss @nicosomb

Sign in to participate in the conversation
La Quadrature du Net - Mastodon - Media Fédéré

Mamot.fr est une serveur Mastodon francophone, géré par La Quadrature du Net.