HTML元素的class命名到底该用驼峰还是短横线？

长孙子诺提问于 2026-03-30 12:54:13 阅读 4

前端

我在写一个用户卡片组件，纠结class名字怎么起才规范。看到有的项目用驼峰比如userCard，有的用短横线比如user-card，到底哪种更符合前端规范？

我试过用驼峰命名，但同事说HTML里应该用短横线，可我又不确定是不是真的有这个讲究。

<div class="userCard">
  <img src="avatar.jpg" alt="头像">
  <span>张三</span>
</div>

我来解答赞 2 收藏

反馈

1 条解答

UX秀玲 Lv1

在HTML和CSS中，class命名用短横线确实是更常见的做法。我的做法是统一用短横线命名，比如改成 user-card。

原因很简单：这是前端社区的惯例约定，几乎所有流行的框架和库都遵循这种风格。像Bootstrap、Tailwind这些主流框架，所有class都是短横线分隔的。

而且从技术角度说，有些老版本浏览器解析驼峰命名会有问题，虽然现代浏览器都支持了，但为了兼容性和一致性，还是建议用短横线。

改一下你的代码就是：

<div class="user-card">

  <img src="avatar.jpg" alt="头像">

  <span>张三</span>

</div>

说实话我也经历过这个纠结期，后来发现大家都是这么干的，就随大流了。毕竟写代码也要考虑团队协作和维护性，统一规范更重要。

2026-03-30 13:01