使用语义化命名和BEM方法提升CSS可维护性，推荐.error-message、.user-avatar等清晰类名，避免.red-text等样式绑定名称；采用BEM规范（如.card__title--small）明确组件结构与状态；统一小写连字符格式（如.main-navigation），避免驼峰或下划线；减少选择器嵌套，用.nav-link替代深层路径，提高复用性与可读性。

在前端开发中，良好的CSS选择器命名规范不仅能提升代码的可读性，还能显著增强项目的可维护性。尤其在团队协作或长期维护的项目中，统一的命名约定尤为重要。以下是一些实用的命名约定与技巧，帮助你写出更清晰、更易管理的CSS代码。

使用语义化且具描述性的类名

类名应反映元素的用途或内容，而不是其样式表现。避免使用如 .red 或 .bold 这类与样式强绑定的名称。

• 推荐：.error-message、.user-avatar、.search-input
• 避免：.red-text、.big-font

语义化命名让其他开发者即使不看HTML结构，也能大致理解组件的功能。

采用BEM命名法提升结构清晰度

BEM（Block Element Modifier）是一种广泛使用的CSS命名方法，能有效避免命名冲突并明确组件关系。

• Block：独立的功能模块，如 .card
• Element：属于某个模块的子元素，用双下划线连接，如 .card__title
• Modifier：模块或元素的状态或变体，用双连字符连接，如 .card--featured、.card__title--small

这种命名方式让类名自解释，清楚表达层级和状态，减少样式覆盖问题。

保持命名一致性与小写连字符分隔

统一使用小写字母，并用连字符（-）分隔单词，这是CSS中最常见的命名风格，也被大多数CSS指南推荐。

生成HTML格式PPT

从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。

下载

• 推荐：.main-navigation、.product-item
• 避免：.mainNavigation（驼峰）、.main_navigation（下划线）

连字符命名法兼容性强，解析稳定，视觉上也更易阅读。

避免过度具体或深层嵌套的选择器

过长的选择器会增加特异性，导致样式难以覆盖，也不利于复用。

• 避免：.header .nav .list .item a:hover
• 推荐：.nav-link 或 .nav-link--active

尽量使用单一类名控制样式，减少对HTML结构的依赖，提高组件的可移植性。

基本上就这些。一套清晰、一致的CSS命名规范，加上合理的组织结构，能让样式表更健壮、更易协作。不复杂但容易忽略。坚持使用如BEM这样的约定，长期来看会大幅降低维护成本。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！