对 className 风格技术做出反应的最佳实践答案

【问题标题】：Best practice in react when come to className style Technique对 className 风格技术做出反应的最佳实践
【发布时间】：2020-12-22 21:23:40
【问题描述】：

我是react.Js 的新手，通常我在vue.js 或vanilla (pure HTML, CSS, JS) 做我的造型。我对React 中的 ClassName Best Practice 有一些疑问。我想询问在 ReactJs 中给出 className 时的最佳实践（如果您在使用其中一种样式时给我诸如优缺点之类的理由，这将很有帮助）。

假设我在React.Js 中有一个页面，在scoped 和global 中有一些css 文件。这里有一些我在React.Js 中进行样式设置或在其中说明我的类时使用的技术：

className={styles.scopedCSS} --> 我在这个例子中使用了作用域样式import styles from './mycode.css'
className="Global-CSS" --> 我正在使用全局 css 文件，比如说app.css

一般来说有这两种技术，但让我好奇的是，当您在项目中使用更复杂和自定义的 CSS 样式时，例如组合 global 和 scoped CSS。这是我发现的当前技术：

className={`Global-CSS Global-CSS ${styles.ScopedCSS} ${styles.ScopedCSS}`}
className={`Global-CSS Global-CSS ${styles.['scoped-css', 'scoped-css']}`}
className={Style.constStylingName} --> 为此，我使用Const constStylingName = `Global-CSS Global-CSS ${styles['scoped-css', 'scoped-css']} 来编写完整的CSS 行，所以我只使用一行来定义我的ClassName，如果你愿意，你也可以使用terniary operation在这里添加一些逻辑。
style={marginLeft: 0, display: 'flex', etc.} --> 在我的代码中直接使用full Styles inline

对于信息我真的很好奇，因为我发现这是一个非常有趣的话题，我发现解释这些差异对我有用的文章并不多，而且我只是作为上述技术之一进行了相当多的讨论当您的项目规模越来越大时，将使您的代码看起来像意大利面条代码。

我希望有人可以帮助我向我解释这个问题，因为我真的很想了解反应中的这个造型技术问题。

【问题讨论】：

您可以查看BEM 方法。这种方法不仅适用于react，它适用于您有一个大项目并且不想重复类名的情况。 en.bem.info/methodology/css
@Hovakimyan 感谢您的评论和BEM reference 文章。学习概念本身的名称对我来说是新的，通常当我将我的班级划分并征服一个非常具体的班级时，我会使用这个概念。但它似乎与general section point 2 中的普通类匹配。但是感谢您提供新信息，因为我正在使用这种方法但不知道概念本身的名称

标签： javascript html css reactjs

【解决方案1】：

为了动态实现className，我建议使用npm包classnameshttps://www.npmjs.com/package/classnames。

比如你可以这样使用（非常方便条件类）：

import cn from classnames;

className={cn('text-bold', 'font-xl')}
className={cn('text-bold', {'font-xl': userInput === 'xl'})}

如果您使用的是作用域 css，最好检查 css 模块而不是普通 css。如果你对 css-in-js 感兴趣，情感和 styled-components 是一些选择，这在 React 样式中非常流行。

【讨论】：