gpt4 book ai didi

CSS 模块 : Best practice combining classnames?

转载 作者:行者123 更新时间:2023-11-28 05:19:27 24 4
gpt4 key购买 nike

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

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

如果我需要为所有菜单 div(主页、关于)创建一个类,还需要为每个设置样式的链接创建一个类,那么我需要为所有链接创建一个共享类。我认为有不同的方法可以做到这一点:

/* 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>

我见过人们以不同的方式做到这一点。哪一个更容易,性能更好,在大型应用中扩展性更好?

最佳答案

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

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

如果 .homeLink 对网站上的其他地方有帮助(以类似的方式设计其他一些homelink),那么第三。否则,第二个解决方案尽可能严格地保持 CSS 规则。

关于CSS 模块 : Best practice combining classnames?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39138531/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com