时间戳

首页 > 解决方案 > 使用 CSS-in-JS 时，我应该为 CSS 类使用哪种大小写？

javascript - 使用 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;
}

标签： javascriptcsscss-in-js

解决方案

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

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

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

推荐阅读