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

Question

我读到 CSS-spec 没有指定区分大小写，这导致一些浏览器将 .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 代码中看起来有点丑。

最佳做法建议使用烤肉串；但是，是的，您没有，但是，在 modules/objects (className={style.like-this-example}).[=11 的情况下，烤肉串可能不太适用=]

Answer 2

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

反应：

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

CSS

.myButton {
    background-color: blue;
}

请参阅此媒体 link 以获得更多见解： CSS in JS

Answer 3

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

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

Answer 4

唔？ CSS不区分大小写？

我认为你需要阅读。

Are class names in CSS selectors case sensitive?

Are CSS selectors case-sensitive?

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

对一个开发人员来说是“约定俗成”的东西对另一个开发人员来说不一定是“约定俗成”。唉，为什么你需要和你的团队一起工作。

Which casing should I use for CSS classes when using CSS-in-JS?