Modules CSS: meilleure pratique combinant les noms de classe?

J'utilise css-modules dans une application ReactJS que je développe.Modules CSS: meilleure pratique combinant les noms de classe?

<div> 
    <div className={styles.homeLink}>home</div> 
    <div className={styles.aboutLink}>about</div> 
</div>

si je dois avoir une classe pour tous les divs de menu (maison, environ) et aussi classe spécifique pour chacun des liens qui leur style puis-je créer une classe partagée pour tous les liens. Je pense qu'il y a différentes manières de le faire:

/* First code using composes */ 
.links { 
    margin-left: 10px; 
    float:left; 
} 
.homeLink { 
    composes: links; 
    color: #FFF; 
} 
.aboutLinks { 
    composes: links; 
    color: #CCC; 
}

Je utilise des compositions d'une classe dans le même fichier ici. Dans ce cas, je dois utiliser un seul nom de classe dans mon JSX.

2 autres façons:

/* Second code using combined classes and multiple classes later */ 
.links { 
    margin-left: 10px; 
    float:left; 
} 
.links.homeLink { 
    color: #FFF; 
} 
.links.aboutLinks { 
    color: #CCC; 
}

ou peut-être:

/* Third code using multiple classes later */ 
.links { 
    margin-left: 10px; 
    float:left; 
} 
.homeLink { 
    color: #FFF; 
} 
.aboutLinks { 
    color: #CCC; 
}

En deuxième et troisième code que je dois avoir 2 classes dans chaque accessoire className:

<div> 
    <div className={className(styles.links, styles.homeLink)}>home</div> 
    <div className={className(styles.links, styles.aboutLink)}>about</div> 
</div>

Je J'ai vu des gens faire cela de différentes façons. Lequel est le plus facile, a de meilleures performances et évolue mieux dans les grandes applications?

Source

2016-08-25 Pooya Sanooei

Cette question est soit trop large, ** basé sur l'opinion ou nécessite une discussion ** et est donc hors-sujet pour Stack Overflow. Si vous avez un problème spécifique de programmation, merci de fournir tous les détails. –

@Paulie_D J'ai fourni tous les détails et ce n'est pas basé sur l'opinion. Je demande des bonnes pratiques, il y a des centaines de questions comme celle-ci. Vous avez vraiment voté pour être trop large? –

Si vous demandez ce qui est ** mieux ** c'est clairement basé sur l'opinion, "Best" est subjectiive et donc, encore une fois, ** basé sur l'opinion **. –

Je voterais pour la 2ème ou 3ème option car elle évite la duplication de code CSS.

Lequel de ces deux, cela dépend du contexte plus large.

Si .homeLink serait utile ailleurs sur le site (pour styler un autre homelink d'une manière similaire), puis 3ème. Sinon, 2ème solution pour garder les règles CSS aussi strictes que possible.

Source

2016-08-25 07:15:38

vos options est dépend du scénario de différence, en fonction de votre code il est 2ème option est préférable si elle contient autre balise div et même classe que troisième option css appliquer à cette option si 2 est mieux

Source

2016-08-25 10:31:06

Modules CSS: meilleure pratique combinant les noms de classe?

Répondre

Questions connexes