什么是 kebab-case？在 URL 与 CSS 中的用法

kebab-case 将每个字母都写成小写，并以连字符（-）连接单词，因像串在烤肉签上的食材而得名。

kebab-case 的规则

user profile image 在 kebab-case 中会变成 user-profile-image。它也被称为 spinal-case 或 dash-case。

它与 snake_case 的唯一区别在于使用连字符而非下划线。

适用场景

• URL 路径和 slug（例如 /my-blog-post）
• CSS 类名与自定义属性（--main-color）
• HTML data 属性（data-user-id）
• 文件名与 npm 包名

为什么 URL 与 CSS 中用连字符

在许多编程语言中，下划线允许出现在标识符里，但连字符会被读作减法，无法用于名称。因此连字符自然而然地落脚于代码之外的领域，如 URL、CSS 和文件名。

搜索引擎会把连字符视为单词分隔符，而下划线有时不会，因此在 URL 中推荐使用连字符。

一点注意

连字符不能用于代码标识符，因此像 JavaScript 变量名这样的场景不会使用 kebab-case。这时应改为转换成 camelCase。