Front-end - Comment la classe doit-elle être nommée ? Nommer ce type de .newsList n'est-il pas vraiment trop sémantique ? ~

Question

J'ai vraiment lu diverses spécifications et avis de divers experts et je ne sais plus écrire du CSS ~

Personnellement, je n'aime pas beaucoup les cours atomiques, et il y a quelques problèmes de sémantique (peut-être que je ne les comprends pas encore)

Par exemple, que dois-je faire si j'ai une liste avec le même style que newsList mais que le contenu n'est pas une actualité ? Oui, le préprocesseur CSS peut le résoudre, mais cela ne peut-il être que comme ça... Si mon nom n'est pas newsListe mais liste, est-ce que cela viole les règles ? Avec la sémantique, j'ai bien précisé que cet article est une liste, donc la réutilisation n'est pas un problème

Et si je souhaite définir une liste plus tard ? list2... Ce problème s'est également produit lorsque diverses spécifications ont défini l'état du modificateur. Si un composant a un modificateur, la différence entre ce modificateur et la classe de base est qu'il y a une marge. haut. Alors, que dois-je faire ?

Comment nommer tous les blocs d'une page modèle...

Je pense que le nom de l'en-tête est trop spécifique. Si le site Web est révisé et que je souhaite utiliser l'en-tête précédent comme pied de page...

Puis-je quand même être sauvé ? ~

Answer 1

Et si j'ai une liste avec le même style que newsList mais que le contenu n'est pas une actualité

Définissez une classe de base puis héritez-en

Answer 2

La sémanticisation est à l'origine utilisée pour déterminer la sémantique.
Ce que vous avez dit à propos du changement d'en-tête en pied de page n'est pas du tout déterminé sémantiquement, et bien sûr, cela ne convient pas à la sémantisation.

Mais vous pouvez séparer la sémantique des parties déterminées dans des circonstances prévisibles. Après tout, la sémantique a connu des conditions préalables.

Answer 3

Personnellement, je pense que la dénomination des classes CSS est étroitement liée au projet de conception.

Par exemple, si les listes A et B du projet de conception ont des marges supérieures différentes, vous devez confirmer auprès du concepteur s'il s'agit d'un oubli de conception ou d'une arrière-pensée.

Si vous comprenez l'intention du projet de conception, il existe alors une base pour nommer la classe CSS.

Par exemple :

(En supposant que la deuxième boîte modale s'appelle "Ajouter", je n'ai pas trouvé de brouillon de conception approprié, je l'ai donc réalisé moi-même)

Ce sont deux boîtes modales.
J'ai trouvé qu'elles utilisent toutes la même police, couleur, etc., mais dans la description, l'une est centrée avec l'icône et l'autre affleure le haut de l'icône.

Donc dans un premier temps, j'utiliserai la dénomination suivante :

<article class="delete-modal base-modal"></article>
<article class="add-modal base-modal"></article>

Lorsque je constate que davantage de brouillons de conception utilisent une ligne de texte pour décrire le centre et plusieurs lignes de texte pour décrire le haut, j'utiliserai alors le nom suivant :

<article class="one-line-modal base-modal"></article>
<article class="multi-line-modal base-modal"></article>

L'exemple ci-dessus est ce que je veux dire. La dénomination CSS doit être basée sur l'intention du brouillon de conception.

Parfois, ce n'est peut-être pas le front-end qui fait l'erreur, c'est peut-être le design.