1、设计原则
为了使CSS样式的编写更加规范，部分模板应该从产品设计和UI设计人员最初就规划好设计原则，进而让前端工程师能够根据该原则一贯地执行下去。相关原则有：
1、常用控件、表格、布局和页面做出一套或者多套模板
单选、复选框、按钮、轮播图的上一张/下一张按钮等，应该根据不同场合提前做好一套或者数套模板，每次使用这些控件时应该在这些模板的基础上进行相应更改，如：更改大小、颜色等。
2、需要使用统一的颜色、图标的地方产品、UI设计人员应该提前规划好
前端工程师应根据这些主题元素提前做好规划，最好能够将使用这些主题元素的样式都写在一个CSS文件当中、相应的主题图标的图片放在同一个文件夹，那么以后就能够很方便的更改主题了。
3、常用控件所需要用到图片都应该成套设计
成套的控件的图片应同时设计好，不应该在使用的时候再临时设计，以免出现控件之间不搭配的情况。而成套的控件图片都应经过CSS Sprite处理过之后再使用，以减少图片的加载，也可以在上传图片的时候减少操作。另外，这些控件的CSS样式、js代码都应该写在单独的文件中，方便统一管理和进行统一更换样式，使用的时候直接调用这些文件即可。
4、每一个页面都应用一个独立的CSS文件，常用页面应该做成CSS文件模板
每一个页面都应用一个独立的CSS文件，而不能出现多个页面的样式放到同一个CSS文件中，这样会延长加载时间，也会使得命名更加困难。
常用页面如详情页和含有大量表格的页面的CSS样式应写到各自独立的CSS文件中制作成模板，以后每次使用时直接调用即可。
5、表现与结构分离：CSS样式都应写在CSS文件中，且尽量少用id、组合、属性选择器和行内样式以及style标签样式
为避免在CSS文件使用类选择器和使用js添加类选择器进行样式覆盖时因优先级问题而无法覆盖成功，所有样式的编写都应尽量使用单一的类选择器来编写样式，应尽量少用或不用id选择器、组合/层级选择器和属性选择器，这也可以减少浏览器的查找时间；同时，使用层级/组合选择器时对布局的依赖性太大，耦合性太强，稍微更改布局就没法用了；如果样式不改变的可能性很低的，则可以使用以上类型的选择器。
所有选择器的样式都应写在CSS文件中，尽量少用或不用行内样式和style标签样式。
6、CSS布局不能用js：
便于阅读和交接，不依赖于js，降低制作及修改该布局时所要求的技术基础，有效避免使用js对其进行操作时产生不必要的冲突。
7、引入CSS文件应在html页面的顶部引入
能加快页面内容显示；并能避免页面产生白屏，和网速过慢时避免让用户看到没有经过样式修饰的html代码。
8、禁止在css中使用*选择器
*选择器因为需要遍历页面的所有元素，所以编译的时候会非常消耗时间。
9、层级(z-index)必须清晰明确
页面弹窗、气泡为最高级（最高级为999），不同弹窗气泡之间可在三位数之间调整；普通区块为10-90内10的倍数；区块展开、弹出为当前父层级上个位增加，禁止层级间盲目攀比。
10、用于编写js选择用的class名称应与一般的样式class名称有所区别
例如一般的样式类名：.content-wrapper；而用于js选择用的类名：.content_wrapper_hook。即用下划线替代横杠、后面加一个hook字段。
11、单位一定要统一，除了极个别情况需要用到之外，其他时候不能混用
12、尽量不用id选择器做css样式编写，因为id选择器一般用做js选择，有时可能会因为js的原因改动，那么对应的css就会失效。
13、链接要么都用相对地址、要么都用绝对地址。二者混用时接手的人看起来费劲。
14、css和js的缩进都只能用空格，不能用tab，因为不同人的tab缩进量不同，有的是两个空格，有的是四个空格。
15、小程序里面，rem和rpx是可以相互替代的，不能二者混用。
16、模板都应该设计好相应的html模板页，调用时直接从模板文件中调用html代码即可。
2、规范细则
1、CSS书写顺序
a. 位置属性(position, top, right, z-index, display, float等)
b. 大小(width, height, padding, margin)
c. 文字系列(font, line-height, letter-spacing, color- text-align等)
d.背景(background, border等) 5）
e. 其他(animation, transition等)
2、CSS书写规范
1）使用CSS缩写属性 :
CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。
可缩写的属性中，如果属性值只有1个或2个，那应该分开写；如果大于2个，应该合并写在一起。这样就可以使其编译的时间最优化。
2）去掉小数点前的“0”和0后面的单位，如：0px -> 0
3）简写命名
很多人都喜欢简写类名，但前提是要让人看懂你的命名才能简写。
4）16进制颜色代码缩写
有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。
5）连字符CSS选择器命名规范
① 长名称或词组可以使用中横线来为选择器命名。
② 不建议使用“_”下划线来命名CSS选择器，为什么呢？
因为输入的时候少按一个shift键； 浏览器兼容问题 （比如使用_tips的选择器命名，在IE6 是无效的） 能良好区分JavaScript变量命名（JS变量命名是用“_”）
③用字母、_号、-号、数字组成，必须以字母开头，不能为纯数字。
6）不要随意使用id
id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先于class，所以id应该按需使用，而不能滥用。
7）为选择器添加状态前缀
有时候可以给选择器添加一个表示状态的前缀，让语义更明了，比如下图是添加了“.is-”前缀。
3、CSS命名规范（规则）
1）常用的CSS命名规则
| ID名 | 内容 | ID名 | 内容 |
|---|---|---|---|
| header | 内容、类名、头 | left right center | 左右中 |
| search | 搜索 | list | 文章列表 |
| content/container | 内容 | loginbar | 登录条 |
| friendlink | 友情链接 | msg | 提示信息 |
| footer | 尾、页脚 | logo | 标志 |
| nav | 导航 | tips | 小技巧 |
| copyright | 版权 | banner | 广告 |
| sidebar | 侧栏 | title | 栏目标题 |
| scroll | 滚动 | main | 页面主体 |
| column | 栏目 | joinus | 加入 |
| wrapper | 页面外围控制整体布局宽度 | hot | 热点 |
| tags | 标签 | guide | 指南 |
| menu | 菜单 | news | 新闻 |
| vote | 投票 | service | 服务 |
| submenu | 子菜单 | download | 下载 |
| partner | 合作伙伴 | resister | 注册 |
| status | 状态 | subnav | 子导航 |
2）注释的写法
/* Header / 内容区 / End Header */
3）id的命名
①页面结构
| ID名 | 内容 | ID名 | 内容 |
|---|---|---|---|
| container | 容器 | main | 页面主体 |
| nav | 导航 | wrapper | 页面外围控制整体布局宽度 |
| header | 页头 | footer | 页尾 |
| sidebar | 侧栏 | left、right、center | 左右中 |
| content、container | 内容 | column | 栏目 |
②导航
| ID名 | 内容 | ID名 | 内容 |
|---|---|---|---|
| 导航 | nav | 右导航 | rightsidebar |
| 主导航 | mainnav | 菜单 | menu |
| 子导航 | subnav | 顶导航 | topnav |
| 标题 | title | 边导航 | sidebar |
| 摘要 | summary | 左导航 | leftsidebar |
③功能
| ID名 | 内容 | ID名 | 内容 |
|---|---|---|---|
| logo | 标志 | msg | 提示信息 |
| banner | 广告 | current | 当前的 |
| login | 登录 | 小技巧 | tips |
| 登陆条 | loginbar | icon | 图标 |
| register | 注册 | note | 注释 |
| search | 搜索 | guide | 指南 |
| shop | 功能区 | service | 服务 |
| title | 标题 | hot | 热点 |
| joinus | 加入 | news | 新闻 |
| status | 状态 | download | 下载 |
| btn | 按钮 | 投票 | vote |
| scroll | 滚动 | partner | 合作伙伴 |
| tab | 标签页 | link | 友情链接 |
| list | 文章列表 | copyright | 版权 |
4、注意事项
1）一律小写;
2）尽量用英文;
3）不加中槓和下划线;
4）尽量不缩写，除非一看就明白的单词。
5、CSS样式表文件命名
| 文件名 | 内容 | 文件名 | 内容 |
|---|---|---|---|
| master.css | 主要 | columns.css | 专栏 |
| module.css | 模块 | font.css | 文字 |
| base.css | 基本共用 | forms.css | 表单 |
| print.css | 打印 | layout.css | 布局、版面 |
| mend.css | 补丁 | themes.css | 主题 |
6、BEM实践
注意：严格执行该规范会很啰嗦，建议只在大型工程(组件库)里面用，小工程/组件简单用分隔线就行了。
1、定义
使用 BEM 命名规范，理论上讲，每行 css 代码都只有一个选择器。
BEM代表 “块（block）,元素（element）,修饰符（modifier）” ,我们常用这三个实体开发组件。
在选择器中，由以下三种符号来表示扩展的关系：
- 中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。
__ 双下划线：双下划线用来连接块和块的子元素
_ 单下划线：单下划线用来描述一个块或者块的子元素的一种状态
2、块（block）
一个块是设计或布局的一部分，它有具体且唯一地意义 ，要么是语义上的要么是视觉上的。
在大多数情况下，任何独立的页面元素（或复杂或简单）都可以被视作一个块。它的HTML容器会有一个唯一的CSS类名，也就是这个块的名字。
针对块的CSS类名会加一些前缀（ ui-），这些前缀在CSS中有类似 命名空间 的作用。
一个块的正式（实际上是半正式的）定义有下面三个基本原则：
- CSS中只能使用类名（不能是ID）。
- 每一个块名应该有一个命名空间（前缀）
- 每一条CSS规则必须属于一个块。
例如：一个自定义列表 .list 是一个块，通常自定义列表是算在 mod 类别的，在这种情况下，一个 list 列表的block写法应该为:
.list
3、元素（element）
块中的子元素是块的子元素，并且子元素的子元素在 bem 里也被认为是块的直接子元素。一个块中元素的类名必须用父级块的名称作为前缀。
如上面的例子，li.item 是列表的一个子元素，
.list{}
.list .item{}
.list{}
.list__item{}
修饰符（modifier）
一个“修饰符”可以理解为一个块的特定状态，标识着它持有一个特定的属性。
用一个例子来解释最好不过了。一个表示按钮的块默认有三个大小：小，中，大。为了避免创建三个不同的块，最好是在块上加修饰符。这个修饰符应该有个名字（比如：size ）和值（ small，normal 或者 big ）。
如上面的例子中，表示一个选中的列表，和一个激活的列表项
.list{}
.list.select{}
.list .item{}
.list .item.active{}
.list{}
.list_select{}
.list__item{}
.list__item_active{}
5、书写规则
1. 原则上不会出现2层以上选择器嵌套
使用BEM原则，用命名来解耦，所有类名都为一层，增加效率和复用性
2. 两层选择器嵌套出现在.mod-xxx__item_current子元素的情况，如下：
使用推荐的嵌套写法
常规写法：
.xxx{}
.xxx__item{}
.xxx__item_current{}
// 嵌套写法
.xxx__item_current .mod-xxx__link{}
推荐：
.xxx{}
.xxx__item{}
.xxx__item_hightlight{}
.xxx__product-name{}
.xxx__link{}
.xxx__ming-zi-ke-yi-hen-chang{}
// 嵌套写法
.xxx__item_current{
.xxx__link{}
}
对应的HTML结构如下：
<ul class="xxx">
<li class="xxx__item">第一项
<div class="xxx__product-name">我是名称</div>
<span class="xxx__ming-zi-ke-yi-hen-chang">看类名</span>
<a href="#" class="xxx__link">我是link</a>
<li>
<li class="xxx__item xxx__item_current">第二项 且 当前选择项
<div class="xxx__product-name">我是名称</div>
<a href="#" class="xxx__item-link">我是link</a>
<li>
<li class="xxx__item xxx__item_hightlight">第三项 且 特殊高亮
<div class="xxx__product-name">我是名称</div>
<a href="#" class="xxx__item-link">我是link</a>
<li>
</ul>
7、todo: tailwind
3、布局
该规范是由个人从网上搜索资料以及日常项目总结而来，目前自己能够做成模板的元素还比较少，并且适用范围也有一定限制，都需要在以后的实践中不断补充和完善。等模板多了，就尽量形成自己的UI。
重要布局案例（兼容版/纯CSS3版）
1）sticky footer布局可以使得在不用定位的情况下将内容固定到页面底部。
2）左右等高布局
3）flex布局
4）水平垂直自动居中布局（多行文本/+图片垂直居中布局）
5）巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）
6）左边/右边宽度固定，右边/左边宽度自适应布局（左右两边宽度固定，中间宽度自适应）
7）响应式布局
8）多元素水平居中
9）清除浮动方法
10）在移动端实现真正的1px线
11）css画三角形
12）多行文本省略号
