javascript - 使用 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}/)。