Convention de nommage

Bonjour,
J'utilise une convention de nommage avec une approche sémantique et s'inspirant de BEM et OOCSS...
Là je la remets à jour, car j'utilise deux CMS l'un sans base de données ( PluXml) et l'autre avec base de données (WordPress).. et j'ai décidé d'avoir une certaine harmonisation entre le css de mes thèmes.
Pour BEM, j'essayais jusqu'à maintenant de ne pas utiliser le double underscore; mais difficile si on décide de n'utiliser que des minuscules.
De même, et mon post c'était d'avoir votre avis par rapport à :

<button class="button button--state-success">
	Success button (Version "BEM officielle")
</button>

Ma version :

<button class="button--state-success">
	Success button 
</button>

Le CSS "BEM"

.button { styles communs }
.button--state-success { styles spécifiques }
.button--state-danger { styles spécifiques }

Mon CSS:

[class^="button--"] { styles communs }
.button--state-success { styles spécifiques }
.button--state-danger { styles spécifiques }

Modifié par cpalo (10 May 2022 - 09:31)

Salut,

Si ton but c'est de faire du CSS sémantique, je t'invite à jeter un coup d'oeil du côté de Bulma. Personnellement, je partirais sur quelque chose qui ressemble un peu à ce jsFiddle. Ça résout ton problème en plus de mieux séparer les rôles (la sémantique pour le coup) des classes.

T'en penses quoi ?

Bonjour,
Je connaissais bulma mais je n'avais pas été convaincu... et ne le suis pas plus
Exemples:

.image.is-1by2 .has-ratio, .image.is-1by3 img,
button.is-light.is-inverted.is-outlined.is-loading:hover::after, .button.is-light.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-light.is-inverted.is-outlined.is-loading:focus::after, .button.is-light.is-inverted.is-outlined.is-loading.is-focused::after {
  border-color: transparent transparent whitesmoke whitesmoke !important;
}

Et je lui preferre BEM, personnalisé, avec de l'OOCSS et de l'Atomic Css.. pour completer mon approche sémantique.
Dans mon post, la question portait surtout sur la difference entre les deux CSS [class^="button--"] au lieu de. button. Evitant ainsi d'écrire dans le html

<button class="button button--state-success">

Salut,

ce n'est pas des underscores

Du coup quand tu veux juste un button qui ne correspond à aucun des 2 cas spécifique ?
Tu mets une classe "button--" ?

Mais sinon ça semble potentiellement pas trop mal

@Mathiuu

[class^="button--"],
.button { styles communs }
.button--state-success { styles spécifiques }
.button--state-danger { styles spécifiques }

Sinon lorsque ce sont des classes avec le même préfixe

[class^="grid-cols--"] { styles communs }
.grid-cols--6 { styles spécifiques }
.grid-cols--12 { styles spécifiques }

Hum,

pour garder ton css simple :

[class^="button--"] { styles communs }
.button--state-success { styles spécifiques }
.button--state-danger { styles spécifiques }

ce n'est pas plus simple de juste mettre class="button--" dans ton html pour éviter de créer une classe .button ?

<button class="button--">
Ni Success ni danger button
</button>

Pas forcément.. mais cela respecte ainsi les conventions de nommage BEM ou OCSS..
car button peut très bien ne pas avoir de modifiers