0

我正在开发的 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 中使用一个类名。

其他2种方式：

/* 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 属性中有 2 个类：

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

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

4

2 回答 2

0

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

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

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

于 2016-08-25T07:15:38.533 回答
0

您的选项取决于不同的场景，根据您的代码，如果它包含其他 div 标签和相同的类，则第二个选项更好，而不是第三个选项 css 适用于该选项，因此第二个选项更好

于 2016-08-25T10:31:06.707 回答