CSS 命名规范，指的是用于命名 CSS 文件、id 或 class 的一套规则。良好的 CSS 命名规范可以使得 CSS 代码更加清晰易懂，易于维护和扩展。
CSS 命名规范准则
很多初学者甚至包括从事前端开发工作多年的小伙伴，在给 CSS 文件命名或者给元素 id 以及 class 命名时都会犯愁，总是不知道起什么名字好，如果对这块没有深入了解的话，最终往往都是随便起个名字就算了。
实际上，良好的 CSS 命名规范，不仅可以提高代码的可读性，而且对搜索引擎优化也是非常重要的。CSS 命名规范应该遵守以下 3 个基本原则：
- 使用有意义的名称：名称应该能够反映元素的用途或外观。例如，一个用于表示按钮的元素，可以使用 “button” 或 “btn” 这样的类名。强调语义化命名，可以使代码更具可读性和可维护性。
- 保持名称的简洁性：名称应该尽量简洁明了，避免使用过长的名称。
- 使用一致的命名规则：所有项目或团队成员应该使用一致的命名规则，以便每个人都能够理解代码。
- 避免使用特殊字符：CSS 名称应该只使用字母、数字、中划线和下划线，避免使用其他特殊字符。
对于 CSS 命名规范，我们主要从以下 2 个方面来讲解。
- CSS 文件命名。
- id 和 class 命名。
CSS 文件的命名规范
| 文件名 | 说明 |
|---|---|
| reset.css | 重置样式，重置元素默认样式 |
| global.css | 全局样式，全站公用，定义页面基础样式 |
| theme.css | 主题样式，用于实现换肤功能 |
| module.css | 模块样式，用于模块的样式 |
| master.css | 母版样式，用于母版页的样式 |
| column.css | 专栏样式，用于专栏的样式 |
| form.css | 表单样式，用于表单的样式 |
| mend.css | 补丁样式，用于维护、修改的样式 |
| print.css | 打印样式，用于打印的样式 |
reset.css 用于去除元素的默认样式，使得所有浏览器有统一的外观。
global.css 用于定义公共模块样式以及基础样式。常见的公共模块包括导航、底部信息栏等。基础样式包括全局字体、文字颜色等。
那么最大的问题来了：“平常我们都是把重置样式、导航样式什么的都写在一个 CSS 文件里面，这里为什么还要搞那么多个文件出来呢？再说了，一个 CSS 文件就会引起一次 HTTP 请求，而 HTTP 请求是需要耗费一定时间的。一个页面引入这么多 CSS 文件，加载速度岂不是非常慢？”
事实上，把样式文件划分为多个文件，这是 “开发阶段” 的做法！按照功能模块划分 CSS 文件，那是为了方便在开发阶段的开发和修改。在整站发布的时候，我们会使用 vite 或 webpack 等等工具将多个 CSS 文件压缩合并成一个 CSS 文件。也就是说，开发阶段和发布阶段是有区别的，小伙伴们一定要搞清楚。
id 和 class 的命名规范
不少新手小伙伴对待元素 id 和 class 的使用和命名很随意，似乎完全是凭心情来的。例如这个元素用了 id，那个元素就用 class 吧。其实，什么时候用 id，什么时候用 class，也是很讲究的。
对于 id 和 class，好的命名有很多优点，不仅能提高可读性和可维护性，而且对搜索引擎优化也是相当重要的。搜索引擎通常是根据元素 id 或 class 的命名来判断一个页面。假如一个页面的元素命名很随意的话，搜索引擎小蜘蛛很容易迷路，这样会导致它以后很少来光顾你的网站。
id 和 class 命名，比较常见的有以下 3 种方法。
- 骆驼峰命名法，例如 topMain、subLeftMenu（第一个单词首字母小写，后面每个单词首字母大写）。
- 中划线命名法（最推荐），例如 top-main、sub-left-menu（单词之间用中划线连接）。
- 下划线命名法，例如 top_main、sub_left_menu（单词之间用下划线连接）。
在 CSS 中，对于元素 id 和 class 的命名，我们给出几点建议。
- 使用英文命名而不是拼音命名。例如页面头部应该命名为 “header”，而不是 “toubu”。
- 尽量不缩写，除非是一看就明白的单词，例如 nav。
- 命名要统一规范，不要出现一个元素用 “中划线命名法”，另外一个元素用 “下划线命名法” 的情况。虽然下划线和中划线都可以，但更建议使用中划线（大多数网站都是使用中划线命名法）。
- 为了避免 class 命名的重复，命名时一般取父元素的 class 名作为前缀，例如：
<div class="column">
<h3 class="column-title"></h3>
<div class="column-content"></div>
</div>这种使用 “父元素类名作为前缀” 的写法，在业界被称为 “BEM 命名法（Block__Element--Modifier）”，这是是大型项目中最常用的规范。
接下来，针对页面中常见部分，我们给出一些命名规范建议（仅供参考）。
| 主体 | |
| 最外层 | wrapper（一般用于包裹整个页面） |
| 头部 | header |
| 内容 | content/container |
| 侧栏 | sidebar |
| 栏目 | column |
| 热点 | hot |
| 新闻 | news |
| 下载 | download |
| 标志 | logo |
| 导航条 | nav |
| 主体 | main |
| 左侧 | main-left |
| 右侧 | main-right |
| 底部 | footer |
| 友情链接 | friendlink |
| 加入我们 | joinus |
| 版权 | copyright |
| 服务 | service |
| 登录 | login |
| 注册 | register |
| 导航 | |
| 主导航 | main-nav |
| 子导航 | sub-nav |
| 边导航 | side-nav |
| 左导航 | leftside-nav |
| 右导航 | rightside-nav |
| 顶导航 | top-nav |
| 菜单 | |
| 菜单 | menu |
| 子菜单 | submenu |
| 其他 | |
| 标题 | title |
| 摘要 | summary |
| 登录条 | loginbar |
| 搜索 | search |
| 标签页 | tab |
| 广告 | banner |
| 小技巧 | tips |
| 图标 | icon |
| 法律声明 | siteinfolegal |
| 网站地图 | sitemap |
| 工具条 | tool、toolbar |
| 首页 | homepage |
| 子页 | subpage |
| 合作伙伴 | parter |
| 帮助 | help |
| 指南 | guild |
| 滚动 | scroll |
| 提示信息 | msg |
| 投票 | vote |
| 相关文章 | related |
| 文章列表 | list |
对于上面这些命名规范，建议小伙伴们在实际开发中多多参考，以便使得自己的代码更规范，更具有语义性和可读性。此外，小伙伴们可以审查一下绿叶网的各个页面的源代码，看看页面结构元素是怎么命名的，相信你会从中学到很多东西。
示例 1：良好的命名
button
nav-bar
btn-primary
table-row示例 2：不好的命名
btn1
navbar
btnPrimary
tableRow
TableRow