通用的 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 | 链接菜单 |
