structure des classes en css - suggestions?

Question

Essayer d'organiser des éléments dans mon site Web afin de ne pas se perdre, mais puisque je le fais pour la toute première fois, je voudrais vous demander votre avis. Jetez un oeil à l'image, et laissez-moi savoir si ces classes nommage est logique sémantique sage et sage efficacité:

J'ai plusieurs divs comme celui-là sur mon site et ils diffèrent en termes de la taille de la police, le placement des éléments, etc., c'est pourquoi j'ai décidé d'utiliser la structure arborescente pour donner des noms aux classes.

Vous pensez que c'est une bonne idée ou que vous préférez le faire différemment?

Answer 1

Comme vous avez une structure hiérarchique, pourquoi ne pas l'utiliser en CSS et, en tant que tel que je le ferais comme suit:

.businesscard {} 
.businesscard .details {} 
.businesscard .details .name {} 
.businesscard .details .connector {} 
.businesscard .details .date {} 
.businesscard .title {} 
.businesscard .content {} 
.businesscard .progress {} 

En tant que telle cette approche est plus facile traduisible MOINS/SCSS que celui avec -

.businesscard { 
.details { 
    .name {} 
    .connector {} 
    .date {} 
} 
.title {} 
.content {} 
.progress {} 
} 

en outre, si vous deviez créer un, disons carte de visite rouge. Une approche serait de l'ajouter sur le conteneur supérieur comme class='red businesscard', mais serait-il alors compatible avec le schéma que vous avez créé? Si vous deviez créer une carte de visite rouge qui a un look différent pour le conteneur supérieur, mais reste reste le même, avec votre schéma donné, il serait class='red-businesscard', mais il serait alors incompatible avec la dénomination des autres conteneurs.

Answer 2

Vous pouvez simplement utiliser class="content" etc. et refléter votre structure arborescente à l'aide de sélecteurs descendants. Par exemple.

#businesscard .content { /*...*/ } 
#businesscard .details { /*...*/ } 

etc.

Cela vous donne également la possibilité d'appliquer des styles à des éléments similaires sur la page, par exemple

.content { /*...*/ } 
.details { /*...*/ } 

Si vous êtes susceptible d'utiliser plus d'un businesscard div, vous devez utiliser une classe au lieu de l'identifiant, par exemple

.businesscard .content { /*...*/ } 
.businesscard .details { /*...*/ }