在编码思想上，我们可以将页面拆分成不同的层级（布局、模块、元件）。
什么是CSS命名空间？
通过统一的命名规范定义命名的范围，成为CSS class &id命名空间。
布局: 以语义化的单词layout作为命名空间，例如主栏布局命名 layout-main，只改变layout-命名空间后面的命名，layout始终保留。布局的命名空间为layout-xxx。
模块：页面是由一个或多个模块组成，模块的英文单词是module，规范简写成mod，如新闻模块mod-news，照片展示模块mod-photo-show。模块的命名空间为mod-xxx 。
元件：元件是属于模块内部的，也可以说模块是由元件和它内部的自有元素组成。如用户照片信息元件cell-user-photo。元件的命名空间为cell-xxx 。
文字颜色(命名空间text-xxx)
text-c1, text-c2,text-c3……
背景颜色(命名空间bg -xxx)
bg-c1,bg-c2,bg-c3……
边框颜色(命名空间border-xxx)
border-c1,border-c2,border-c3……
参考自文章 CSS命名规则
1.基本命名头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
注册：regsiter
状态态：status
投票：vote
合作伙伴：partner
注释的写法
/* Footer */
内容区
/* End Footer */
id的命名
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
id的命名
页面结构
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
导航
导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
功能
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：regsiter
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright
2.class的命名
(1)颜色:使用颜色的名称或者16进制代码,如
.red { color: red}
.f60 { color: #f60}
.ff8600 { color: #ff8600}
(2)字体大小,直接使用"font+字体大小"作为名称,如
.font12px { font-size: 12px}
.font9pt {font-size: 9pt}
(3)对齐样式,使用对齐目标的英文名称,如
.left { float:left}
.bottom { float:bottom}
(4)标题栏样式,使用"类别+功能"的方式命名,如
.barnews { }
.barproduct { }
3.注意事项
1.一律小写
2.尽量用英文
3.不加中杠和下划线
4.尽量不缩写，除非一看就明白的单词.
主要的 master.css
模块 module.css
基本共用 base.css
布局，版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css
前端规范一（命名规范）
1、小驼峰命名法（lowerCamelCase） ：第一个单词以小写字母开始，第二个单词的首字母大写，例如：firstName、lastName。
2、大驼峰命名法（CamelCase） ：每一个单词的首字母都采用大写字母，例如：FirstName、LastName。
3、下划线命名法（snake_case）：下划线命名法也叫蛇形法，全由小写字母和下划线组成，在两个单词之间用下滑线连接。例如：first_name。
4、中划线命名法（kebab-case）：中划线命名法也叫串式命名法，各个单词之间通过下划线“-”连接。例如：first-name。
强制使用：中划线命名法
命名规则：1、文件名不得含有空格
2、文件名建议只使用小写字母，不使用大写字母
3、文件名包含多个单词时，单词之间建议连词线 ( - ) 分隔
4、有复数结构式，要使用复数
示例：login 、 error-page、 icons
强制使用：全部大写字母
为了醒目，某些说明文件的文件名，可以使用大写字母
示例：README
补充说明: README 标准
◎ 项目简介。
◎ 注意事项。
◎ 线上的示例地址（测试、正式）。
◎ 支持运行的环境。
◎ 必要的依赖准备，以及如何搭建。
◎ 项目的安装指南。
◎ 相关的文档链接。
◎ 相关人员的联系方式。
README.md 示例：
强制使用：小驼峰命名法
命名规则：前缀为动词，见名知意
1、onXxx 监听事件的回调
2、handleXxx 处理事件
3、getXxx 获取某个值
4、setXxx 设置某个值
常见场景：
a、事件处理：
(1).事件主动监听采用 onXxx ,被动处理使用handleXxx
示例：onXxxSubmit: '提交表单'
handleXxxSizeChange: '处理分页页数改变'
handleXxxPageChange: '处理分页每页大小改变'
onXxxKeydown: '按下键'
(2). 其他命名：元素+click、 元素+change、select+范围
示例：selectAllXxx: '选择所有'
xxxCellClick: '当某个单元格被点击时会触发该事件'
xxxSortChange: '当表格的排序条件发生变化的时候会触发该事件'
b、增删改查处理：
增: addXxx 添加子项
createXxx 创建大项
删: deleteXxx 真删除
removeXxx 伪删除
改：updateXxx
查: getXxx 获取原始数据需要修改
fetchXxx 原始数据
示例：getUserList: '获取用户列表', fetchToken: '取得Token', deleteUser: '删除用户', removeTag: '移除标签', updateUserInfo: '更新用户信息', addUser: '添加用户', createAccount: '创建账户'
c、API接口函数：
get: getXxxApi
post: postXxxApi
patch: patchXxxApi
delect: delectXxxApi
域名：xxxUrl
一般属性变量 强制使用：小驼峰命名法
1、布尔值
命名规则：前缀为判断性动词
hasXxx 判断是否含有某个值。true：含有此值； false：不含有此值
isXxx 判断是否为某个值。true：为某个值； false：不为某个值
示例：isShow: '是否显示', isLoading: '是否处于加载中'， hasToken: '是否包含Token',
2、数组命名
命名规则：使用名词+List组合
示例: userList: '用户列表'
3、私有属性变量
命名规则：前缀为下划线(_)后面和变量命名一样。
4、枚举变量 \textcolor{red}{强制使用：大驼峰命名法}
枚举的属性使用全大写字母，单词间用下划线隔开。
示例：let TargetState = { READING: 1, READED: 2, APPLIED: 3, READY: 4 }
5、常量： 强制使用：使用全大写字母，单词间用下划线隔开
强制使用：大驼峰命名法
命名规则： 可参考vue官网风格指南
例如： 1、按照功能来命名
2、应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V。
3、组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。
示例：components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue
强制使用: 中划线命名法
命名规则：
1.class、id 、标签、属性的命名应该尽量精短、明确，必须以字母开头命名，且全部字母为小写，单词之间统一使用中划线 “-” 连接
2.class必须代表相应模块或部件的内容或功能，不得以样式信息进行命名。
3.元素 id 必须保证页面唯一。
4.禁止创建无样式信息的 class
示例：
1、尽量不要缩写、简写的单词。除了 template =>tmp、message =>msg、image =>img、property =>prop 这些单词已经被公认的缩写
2、可读性强的命名优先于简短的命名
3、命名长度最好在 20 个字符以内，避免多长带来的阅读不便
4、命名要有具体的含义，避免使用一些泛指和无具体含义的词
5、不要使用拼音，更不要使用中文
6、正则表达式用 Exp 结尾
7、ref：使用Ref结尾
