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相等
适用场景:外层容器不设定高度,其高度被内部的内容自动撑开
- 方法2:绝对定位,搭配
margin-left
与margin-top
,其值分别为负的width/2
,负的height/2
适用场景:外层容器宽高固定,尤其适合于“弹窗”效果
- 方法3:使用vertical-align
原理:由于vertical-align
定义行内元素的基线相对于该元素所在行的基线的垂直对齐,因此可以在固定宽高的父容器之前加上一个内容为空的inline-block
,让它宽度与父容器宽度保持一致,这样目标元素的基线就能相对这个inline-block
基线垂直对齐。
- 方法4:使用display: table-cell
原理:display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。但是存在兼容性问题,IE6&7不支持这一属性。