通用的 CSS 命名惯例
在参与规模庞大、历时漫长、且参与人数众多的项目时，要确保每一行代码都像是同一个人编写的；这就要求所有开发者，都遵守相同的代码规范。在先前的文章前端项目开发规范意见，从宏观角度，对前端开发提出了些许建议。本问就 “CSS 命名“这一普遍性难题，做下探讨。
通用规则
- 保持 CSS 易于维护；
- 保持代码清晰易懂；
- 保持 CSS 的可拓展性；
为实现这一目标，无数仁人志士，贡献了大量的方案，如 CSS 预处理、CSS Framework（tailwindcss）、Postcss、css-modules、以及 CSS 命名规范（BEM）等等；但是否能达成目标，还是得取决于写代码的人；有挑选性整理一些 CSS 代码规范，以供参考：
通用 CSS 命名
文本命名规范
| 名称 | 描述 |
|---|
| index.css |
一般用于首页建立样式 |
| head.css |
头部样式，当多个页面头部设计风格相同时使用 |
| base.css |
共用样。 |
| style.css |
独立页面所使用的样式文件 |
| global.css |
页面样式基础，全局公用样式，页面中必须包含 |
| layout.css |
布局、版面样式，公用类型较多时使用 |
| module.css |
模块，用于产品类页，也可与其它样式配合使用 |
| master.css |
主要的样式表 |
| columns.css |
专栏样式 |
| themes.css |
主体样式 |
| forms.css |
表单样式 |
| mend.css |
补丁，基于以上样式进行的私有化修补 |
页面结构命名
| 名称 | 描述 |
|---|
| page |
代表整个页面，用于最外层 |
| wrap |
外套，将所有元素包在一起的一个外围包，用于最外层 |
| wrapper |
页面外围控制整体布局宽度，用于最外层 |
| container |
一个整体容器，用于最外层 |
| head，header |
页头区域，用于头部 |
| nav |
导航条 |
| content |
内容，网站中最重要的内容区域，用于网页中部主体 |
| main |
网站中的主要区域（表示最重要的一块位置），用于中部主体内容 |
| column |
栏目 |
| sidebar |
侧栏 |
| foot，footer |
页尾、页脚。网站一些附加信息放置区域 |
功能命名
| 名称 | 描述 |
|---|
| logo |
标记网站logo标志 |
| banner |
标语、广告条、顶部广告条 |
| login |
登录 |
| loginbar |
登录条 |
| register |
注册 |
| tool, toolbar |
工具条 |
| search |
搜索 |
| searchbar |
搜索条 |
| searchlnput |
搜索输入框 |
| shop |
功能区，表示现在的 |
| icon |
小图标 |
| label |
商标 |
| homepage |
首页 |
| subpage |
二级页面子页面 |
| hot |
热门热点 |
| list |
文章列表 |
| scroll |
滚动 |
| tab |
标签 |
| sitemap |
网站地图 |
| msg 或 message |
提示信息 |
| current |
当前的 |
| joinus |
加入 |
| status |
状态 |
| btn |
按钮 |
| tips |
小技巧 |
| note |
注释 |
| guild |
指南 |
| arr, arrow |
标记箭头 |
| service |
服务 |
| breadcrumb |
即页面所处位置导航提示 |
| download |
下载 |
| vote |
投票 |
| siteinfo |
网站信息 |
| partner |
合作伙伴 |
| link, friendlink |
友情链接 |
| copyright |
版权信息 |
| siteinfoCredits |
信誉 |
| siteinfoLegal |
法律信息 |
导航命名
| 名称 | 描述 |
|---|
| nav, navbar, navigation |
导航条或导航包 |
| topnav |
顶部导航 |
| mainbav |
主导航 |
| subnav |
子导航 |
| sidebar |
边导航 |
| leftsidebar |
左导航 |
| rightsidebar |
右导航 |
| title |
标题 |
| summary |
摘要 |
| menu |
菜单 |
| submenu |
子菜单 |
| drop |
下拉 |
| dorpmenu |
下拉菜单 |
| links |
链接菜单 |
来源： https://quickapp.lovejade.cn/generic-css-naming-convention/
