CSS 命名为什么规范？
根据自身经历总结，因混乱、不规范的 CSS 命名所导致的问题有以下几点：
- 没规范，也就没有限制，每次命名时会东想西想很久，浪费时间。
- 没规范，命名随意，不能很好的反映该元素的在文档中的结构、功能，、状态、样式，语义不明，下次在看时，难懂。
- 没规范，命名混乱，甚至会发生命名冲突情况，难复用。
- 如果是多人合作开发，每个人都随意命名，他人解读不便，增加了修改和维护的难度。
所以，好的 CSS 命名规范对个人或团队都挺重要的，按规范命名，不必花费过多的思考时间；语义明确的名称，能一眼看出该元素的结构、功能、状态、样式等信息；规范的命名，团队成员之间都比较容易解读，更易复用，不仅可以提高开发效率，而且有益于后期修改和维护。
网上查询了关于 CSS 样式命名的资料，其中比较常用的思想: BEM,像 在我项目中用的iview UI，饿了么的element-ui，以及阿里的 Ant Design 这些开源的 UI 组件库中的 CSS 命名都是基于BEM的思想。
什么是 BEM？
BEM 的意思是 块(Block)、元素(Element)、修饰符(Modifier)，其基本命名规则就是组件名+元素名+修饰符名
- 块(Block)， 一个块就是一个独立有实际意义的组件或模块，并且每一个块在逻辑和功能上是相互独立的。例如，
button,form等。
- 元素(Element)， 它属于块的一部分，没有独立的意义，在语义上要绑定到它的块上。例如，
from-item绑定在form块上;form-item-label元素又是绑定在from-item块上的。
- 修饰符(Modifier)，它是块或元素的标志，用来表示它们的外观、行为、或状态。例如
button-circle 圆形按钮,button-success成功状态的按钮。
CSS 命名规范/约定
| 命名 |
说明 |
| master.css 、main.css 、style.css |
主要的样式 |
| base.css |
基础，公用 |
| layout.css |
布局，排版 |
| theme.css |
主体 |
| font.css |
文字、字体 |
| form.css |
表单 |
| mend.css |
补丁 |
| print.css |
打印样式 |
| 命名 |
说明 |
| header |
页面 头部 |
| nav |
导航 |
| main |
页面 主体 |
| sidebar |
侧栏 |
| content |
内容 |
| container |
容器 |
| wrapper |
包装容器，一般用于布局，控制内部 |
| footer |
页面 底部 |
| left right center |
页面 左 右 中 部分 |
| 命名 |
说明 |
| nav |
导航 |
| mainnav |
主导航 |
| subnav |
子导航 |
| breadcrumb |
面包屑导航 |
| pageheader |
页头 导航 （返回 按钮） |
| sidebar |
侧边导航 |
| leftsidebar |
左侧导航 |
| rightsidebar |
右侧导航 |
| menu |
菜单 |
| submenu |
子菜单 |
| dropdown |
下拉菜单 |
| title |
标题 |
| summary |
摘要 |
| 命名 |
说明 |
| logo |
标志 |
| brand |
品牌 |
| banner |
横幅图片、广告 |
| login |
登陆 |
| logout |
登出 |
| loginbar |
登陆条 |
| register |
注册 |
| search |
搜索 |
| serchbar |
搜索条 |
| icon |
图标 |
| share |
分享 |
| digg |
顶 |
| like |
喜欢 |
| guild |
指南 |
| vote |
投票 |
| partner |
合作伙伴 |
| flink |
友接 |
| aboutus |
关于我们 |
| contact |
联系我们 |
| company |
公司介绍 |
| culture |
企业文化 |
| honor |
公司荣誉 |
| aptitude |
企业资质 |
| copyright |
版权 |
| news |
新闻 |
| download |
下载 |
| service |
服务 |
| joinus |
加入 |
| top / rank |
排名 |
| ad |
广告 |
| help |
帮助 |
| tips |
小技巧 |
| note |
注释 |
| info |
信息 |
| toggle，switch |
开关 |
| attach |
附件 |
| captioning |
字幕 |
| notification |
通知 |
| avatar |
头像，图像 |
| 命名 |
说明 |
| previous |
前一个 |
| next |
后一个 |
| current |
当前的 |
| show |
显示的 |
| hide |
隐藏的 |
| open |
打开的 |
| close |
关闭的 |
| default |
默认的 |
| selected |
选择的 |
| active |
有效的，激活的 |
| disabled |
禁用的 |
| danger |
危险的 |
| primary |
主要的 |
| success |
成功的 |
| warning |
警告的 |
| error |
出错的 |
| info |
提示的 |
| lg |
大型的 |
| sm |
小型的 |
| md |
中型的 |
| xs |
超小型的 |
| collapsed |
收起的 |
常用小 组件命名，介绍
| 组件名 |
介绍 |
| Button |
按钮 |
| ButtonGroup |
按钮组 |
| Icon |
图标 |
| Grid |
栅格布局，24 等分（ view UI ，浮动 + 百分比宽度，and Design， flex+百分比框 |
| Layout |
布局，旗下可嵌套 Header,Sider,Content,Footer |
| List |
列表，可承载文字、图片、段落等，常用于后台数据展示 |
| Card |
卡片，一种容器，用来显示文字、列表、图文等信息聚合在卡片容器中展示 |
| Collapse |
折叠面板，可折叠，展开的内容区域 |
| Split |
面板分隔，将一部分区域，分隔成可拖拽调整宽、高的 2 部分区域 |
| Divider |
分割线 |
| Cell |
单元格 |
| Menu |
导航菜单 accordion 是否开启手风琴模式（即只能展示一个子菜单） |
| Breadcrumb |
面包屑导航，显示网站的层级结构，告知用户当前位置 |
| Tabs |
标签页，选项卡切换 |
| Dropdown |
下拉菜单 |
| Page |
分页 |
| Anchor |
锚点，跳转到页面的指定位置 |
| Steps |
步骤条 |
| LoadingBar |
加载进度条，用于页面加载、异步请求，文件上传、下载等 |
| Input |
输入框 |
| Radio |
单选框 |
| Checkbox |
多选框 |
| Switch |
开关 |
| Select |
选择器，可支持单选、多选、搜素 |
| AutoComplete |
自动补全 |
| Slider |
滑块，用于在数值区间进行选择，支持连续或离散值 |
| DatePicker / TimePicker |
日期，时间选择器 |
| Cascader |
级联/层级 选择，常用于省市区、公司级层等选择 |
| Transfer |
穿梭框 |
| Rate |
评分 |
| Upload |
上传 |
| ColorPicker |
颜色选择 |
| Badge |
徽标，在通知图表或用户头像的右上角，提醒用户处理 |
| Avatar |
头像 |
| Affix |
图钉，固定在屏幕上，不随页面滚动而滚动 |
| BackTop |
返回顶部 |
| Alert |
警告提示 |
| Message |
提示信息，操作反馈，自动消失 |
| Notice |
通知提醒，通知，或系统主动推送，可关闭 |
| Modal |
模态对话框，在浮层中显示、并引导用户进行操作 |
| Drawer |
抽屉，从父区域边缘滑入，覆盖部分父区域内容 |
| Tree |
树形控件，展示事物的层级关系 |
| Tooltip |
文字提示气泡框，代替 元素title提示 |
| Poptip |
提示气泡框 |
| Progress |
进度条 |
| Tag |
标签 |
| Carousel |
走马灯，图片、卡片轮播 |
| Timeliine |
时间轴 |
| Spin |
加载中，用于页面和区块的加载中状态 |
| Skeleton |
骨架屏，在需要等待加载内容的位置提供一个占位图形组合 |
