通用CSS命名惯例

通用的 CSS 命名惯例

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

通用规则

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

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

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

通用 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/