使用 CSS-in-JS 时，我应该为 CSS 类使用哪种大小写？

我读到 CSS 规范没有指定区分大小写，这导致一些浏览器将 .myheader 视为等于 .myHeader 。但是由于Javascript中的标准是用驼峰写法来写变量，那么在使用css-in-JS时如何调和这两者呢？

我的 React 代码可能如下所示：

import style from './style.module.css'
//...
<Button className={style.myButton} />

然后 CSS 会破坏大小写约定：

.myButton {
    background-color: blue;
}

或者我的 React 代码可能看起来像这样（有点丑）：

import style from './style.module.css'
//...
<Button className={style['my-button']} />

然后 CSS 将遵循 kebab-case 约定：

.my-button {
    background-color: blue;
}

最终取决于您。如果您是唯一将在该项目上工作的人，那没关系。如果您与团队合作，请与他们讨论他们的偏好。

就我个人而言，我在我的项目中使用了所有表单。这只是取决于我正在使用的代码看起来正确或感觉正确，就像你提到的 kebab-case 在你的 React 代码中看起来有点丑一样。

最佳实践建议使用烤肉串；但是，是的，您不必这样做，但是，烤肉串在模块/对象 (className={style.like-this-example}) 的实例中可能效果不佳。

虽然同意@Dexterians，但这是我们作为团队应该做出的选择。但是，我更喜欢命名约定而不是它在特定语言中的用法。对我来说，我会选择类名 my-button 而不是 myButton，然后使用 style['my-button']

这样我们就可以在名称上保持一致，而不受语言限制。

呸？ CSS 不区分大小写？

我认为你需要阅读。

你有点自相矛盾@Anders - 当你试图遵循惯例时 - 你正在做@Dexterians和@Bharat所说的那样，做适合你需要的自己的事情：P

对一个开发者来说是“约定”的东西不一定对另一个开发者来说就是“约定”。唉，为什么您需要与您的团队合作。

在 React 中，第一个总是适用于模块，所以你不需要担心它。因此，遵循以下约定可以正常工作。

反应：

import style from './style.module.css'
//...
<Button className={style.myButton} />

CSS

.myButton {
    background-color: blue;
}

有关更多见解，请参阅此媒体链接： CSS in JS