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

Question

我读到 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;
}

Answer 1

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

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

最佳实践建议使用 kebab-case；但是，是的，您没有必须，但是，kebab-case 在模块/对象的实例中可能效果不佳 (className={style.like-this-example})。

Answer 2

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

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

Answer 3

哇？ CSS 不区分大小写？

我认为你需要阅读。

Are class names in CSS selectors case sensitive?

Are CSS selectors case-sensitive?

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

对于一个开发者而言，“惯例”不一定是另一位开发者的“惯例”。唉，为什么您需要与您的团队合作。

Answer 4

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

反应：

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

CSS

.myButton {
    background-color: blue;
}

有关更多信息，请参阅此 Medium 链接： CSS in JS