在参与规模庞大、历时漫长、且参与人数众多的项目时，要确保每一行代码都像是同一个人编写的；这就要求所有开发者，都遵守相同的代码规范。在先前的文章前端项目开发规范意见，从宏观角度，对前端开发提出了些许建议。本问就 “CSS 命名“这一普遍性难题，做下探讨。

• 保持 CSS 易于维护；
• 保持代码清晰易懂；
• 保持 CSS 的可拓展性；

为实现这一目标，无数仁人志士，贡献了大量的方案，如 CSS 预处理、CSS Framework（tailwindcss）、Postcss、css-modules、以及 CSS 命名规范（BEM）等等；但是否能达成目标，还是得取决于写代码的人；有挑选性整理一些 CSS 代码规范，以供参考：

• 编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。
• 如何编写可维护的 CSS
• CSS、JS 、 HTML 编码规范

文本命名规范

名称

描述

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/