Question

我正在开发的ReactJS应用程序中使用css-modules。

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

如果我需要为所有菜单div（home，about）创建一个类，并为每个设置它们的链接指定特定的类，那么我需要为所有链接创建一个共享类。我认为有不同的方法可以做到：

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

我在这里使用同一文件中的类的组合。在这种情况下，我需要在我的JSX中只使用一个类名。

其他两种方式：

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

或者也许：

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

在第二个和第三个代码中，我需要在每个className prop中有两个类：

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

我看到人们以不同的方式做到这一点。哪个更容易，在更大的应用程序中有更好的性能和更好的扩展？

Answer 1

我会投票选择第二或第三选项，因为它避免了CSS代码重复。

这两者中的哪一个，取决于更广泛的背景。

如果.homeLink对网站上的其他位置有帮助（以类似的方式设置其他 homelink 的样式），那么第3个。否则，第二个解决方案是尽可能严格地保持CSS规则。

Answer 2

您的选择取决于您的代码的差异情况它是第二个选项是更好，如果它包含其他div标签和相同的类比第三个选项css适用于那所以第二个选项更好

CSS模块：结合类名的最佳实践？

2 个答案: