1. 编码规范
- 命名规范
- 命名时遵从语义化原则
- 语义化标签优先
- 基于功能命名、基于内容命名
- 命名尽量简略、明了
- 命名时需要养成良好习惯
- 所有命名都使用英文小写
- 命名用引号包裹
- 命名时不是一个既有单词用中横线连接
- 命名尽量体现出元素的功能，不涉及到表现样式
- 借鉴根据业界经验总结得出的常见命名
-
CSS规范
- tab用两个空格表示（不是四个空格）
- CSS的
:后面加个空格，{前面加个空格 - 每条声明都加上分号
- 换行，而不是放到一行，这样方便查看和修改
- 颜色用小写，尽量用缩写，比如白色
#ffffff应该写成fff - 小数不用前缀，比如
0.5s应该写成.5s，且0不用加单位 - 尽量缩写：比如
padding: 10px 20px 10px 20px;应该写成padding: 10px 20px; - 遵循PBTV原则：A. Positioning（位置相关）B. Box Model（盒模型）C. Typographic（文字相关）D. Visual（视觉相关）
总结
命名的确挺难，想出一个合适的名字有挑战性，我认为应该记住或者熟悉一些通用的常见命名，然后努力要求自己遵守以上规范，最好是写完代码后认真检查，长久以来就可以形成自己的习惯和手感，以后的代码在这样的严格要求下会有更强的可读性、也便于修改维护，更加方便团队协作，让大家一起写的代码看起来像一个人写的一样。
2. 垂直居中的实现方式
- 方法1：设置上下padding相等
设置上下padding相等
适用场景：外层容器不设定高度，其高度被内部的内容自动撑开
- 方法2：绝对定位，搭配
margin-left与margin-top，其值分别为负的width/2，负的height/2
绝对定位加margin
适用场景：外层容器宽高固定，尤其适合于“弹窗”效果
- 方法3：使用vertical-align
vertical-align: middle
原理：由于vertical-align定义行内元素的基线相对于该元素所在行的基线的垂直对齐，因此可以在固定宽高的父容器之前加上一个内容为空的inline-block，让它宽度与父容器宽度保持一致，这样目标元素的基线就能相对这个inline-block基线垂直对齐。
- 方法4：使用display: table-cell
display: table-cell
原理：display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。但是存在兼容性问题，IE6&7不支持这一属性。
