CSS类名命名是前端开发中非常基础但又容易引发争议的问题，核心争议点之一就是到底该使用小驼峰命名还是连字符分隔的命名方式，也就是firstRow和first-row这两种写法哪种更合理。
两种命名方式的基本定义
小驼峰命名指的是首单词首字母小写，后续每个单词首字母大写，单词之间没有分隔符，比如<div class="firstRow"></div>中的firstRow就是典型的小驼峰命名。连字符命名则是所有单词小写，单词之间用连字符-连接，比如<div class="first-row"></div>中的first-row就是连字符命名。
CSS语法对类名的支持情况
从CSS语法本身来看，两种命名方式都是合法的，浏览器都可以正常识别。我们可以通过简单的代码示例验证：
<!-- HTML结构 --> <div class="firstRow">小驼峰命名的元素</div> <div class="first-row">连字符命名的元素</div>
/* CSS样式 */
.firstRow {
color: red;
}
.first-row {
color: blue;
}
上述代码中两个div都会按照对应的样式渲染，不会出现识别异常的情况，说明语法层面两种命名没有对错之分。
两种命名方式的优缺点对比
小驼峰命名的优缺点
优点：和JavaScript的变量命名规则一致，在JS操作DOM获取类名时，不需要额外转换命名习惯，比如获取元素后直接可以用变量存储类名，减少思维切换成本。
缺点：不符合CSS社区长期形成的通用习惯，很多CSS预处理器、构建工具的默认规则都是基于连字符命名设计的，使用小驼峰可能会导致部分工具的自动补全、语法检查功能失效。另外连字符在CSS中属于普通字符，而小驼峰没有明确的视觉分隔，长类名的可读性会稍差。
连字符命名的优缺点
优点：是CSS社区最主流的命名方式，几乎所有成熟的CSS规范（比如BEM、OOCSS）都推荐使用连字符分隔单词，团队协作时认知成本更低。同时连字符作为分隔符，长类名的单词边界更清晰，比如user-profile-header比userProfileHeader更容易快速识别每个单词。
缺点：和JavaScript的变量命名习惯不一致，在JS中操作类名时，需要额外注意命名转换，比如要把userProfileHeader对应到user-profile-header。
主流命名规范的选择
目前行业内最常用的是连字符命名，尤其是结合BEM规范使用时，连字符的作用更加明显。BEM是块、元素、修饰体的缩写，命名格式为block__element--modifier，全部使用连字符和下划线分隔，比如：
/* BEM命名示例 */
.card {} /* 块 */
.card__title {} /* 元素 */
.card__title--active {} /* 修饰体 */
这种命名方式可以清晰表达元素的层级和状态，连字符的使用让结构一目了然，这也是连字符命名更受推荐的重要原因。
实际开发中的选择建议
如果是个人项目，两种命名方式都可以选择，只要保持项目内统一即可。如果是团队项目，优先选择连字符命名，符合行业通用习惯，降低协作成本。如果团队中JS开发者占比很高，也可以统一约定使用小驼峰，但需要在项目规范中明确说明，避免和其他项目混淆。
另外需要注意，无论选择哪种命名方式，都要避免使用中文、特殊字符，类名要语义化，不要使用无意义的命名比如box1、div2，这样不管用哪种分隔方式，代码的可维护性都会更高。