CSS综合

说一说你平时写代码遵守的编码规范

1. 语法

• 用两个空格来代替制表符tab--唯一能保证在所有环境下获得一致展现的方法
• 为选择器分组时,将单独的选择器单独放在一行
• 为了代码的易读性,在每个声明块的左花括号前添加一个空格
• 声明块的右花括号应当单独成行
• 每条声明语句的冒号后应插入一个空格
• 为了获得更准确的错误报告,每条声明语句都应该独占一行
• 所有声明语句都应当以分号结尾
• 对于以逗号分隔的属性值,每个逗号后都应该插入一个空格
• 不要在rgb(),rgba(),hsl(),hsla(),rect()值得内部的逗号后插入空格,这样利于从多个属性值中区分多个颜色值
• 对于属性值或颜色参数,省略小于1的小数前面的0(.5代替0.5)
• 十六进制值应该全部小写
• 尽量使用简写形式的十六进制值(#fff代替#ffffff)
• 为选择器中的属性添加双引号(input[type="text"])
• 属性值为0不用指定单位

2. 声明顺序
   相关的属性声明应该归为一组,按下列顺序排列:1.Position 2.Box model 3.typographic 4.Visual;由于定位可以从正常的文档流中移除元素,并且还能覆盖盒模型相关的样式,因此排在首位;盒模型排在第二,因为它决定了组件的尺寸和位置;其他属性只是影响组件的内部,或是不影响前两组属性,因此排在后面
3. 不要使用@import
   与标签相比,@improt指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题,替代办法:

• 使用多个元素
• 通过Sass或Less类似的CSS预处理器将多个CSS文件编译为一个文件
• 通过Rails,Jekyll或其他 系统中提供过CSS文件合并功能

4. class命名

• class名称中只能出现小写字符和破折号(不是下划线也不是驼峰命名法);破折号应该用于相关class的命名
• 避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。
• class名称应当尽可能短,并且意义明确
• 使用有意义的名称,使用有组织的或目的明确的名称,不要使用表现形式的名称
• 基于最近的父class或基本class作为新class的前缀
• 使用.js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。

5. 选择器

• 对于通用元素使用class,这样利于渲染性能的优化
• 对于经常出现的组件,避免使用属性选择器;浏览器的性能会受到这些因素的影响
• 选择器要尽可能短,并且尽量限制组成选择器的元素个数,建议不超过3个
• 只有在必要的时候才将class限制在最近的父元素内(后代选择器)

垂直居中有几种实现方式，给出代码范例

1. 设置上下padding相等,适用于容器高度不限制的情况代码
2. 绝对定位,适用于弹窗 代码
3. 当弹窗宽高不固定时绝对定位法(translate相对于自身移动) 代码
4. vertical-align居中;vertical-align作用于行内元素和表格 代码
5. tables-cell实现居中,改变了display的表现方式代码

tooltips

代码