说一说你平时写代码遵守的编码规范
- 语法
- 用两个空格来代替制表符tab--唯一能保证在所有环境下获得一致展现的方法
- 为选择器分组时,将单独的选择器单独放在一行
- 为了代码的易读性,在每个声明块的左花括号前添加一个空格
- 声明块的右花括号应当单独成行
- 每条声明语句的冒号后应插入一个空格
- 为了获得更准确的错误报告,每条声明语句都应该独占一行
- 所有声明语句都应当以分号结尾
- 对于以逗号分隔的属性值,每个逗号后都应该插入一个空格
- 不要在rgb(),rgba(),hsl(),hsla(),rect()值得内部的逗号后插入空格,这样利于从多个属性值中区分多个颜色值
- 对于属性值或颜色参数,省略小于1的小数前面的0(.5代替0.5)
- 十六进制值应该全部小写
- 尽量使用简写形式的十六进制值(#fff代替#ffffff)
- 为选择器中的属性添加双引号(input[type="text"])
- 属性值为0不用指定单位
- 声明顺序
相关的属性声明应该归为一组,按下列顺序排列:1.Position 2.Box model 3.typographic 4.Visual;由于定位可以从正常的文档流中移除元素,并且还能覆盖盒模型相关的样式,因此排在首位;盒模型排在第二,因为它决定了组件的尺寸和位置;其他属性只是影响组件的内部,或是不影响前两组属性,因此排在后面 - 不要使用
@import
与<link>标签相比,@improt指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题,替代办法:
- 使用多个<link>元素
- 通过Sass或Less类似的CSS预处理器将多个CSS文件编译为一个文件
- 通过Rails,Jekyll或其他 系统中提供过CSS文件合并功能
- class命名
- class名称中只能出现小写字符和破折号(不是下划线也不是驼峰命名法);破折号应该用于相关class的命名
- 避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。
- class名称应当尽可能短,并且意义明确
- 使用有意义的名称,使用有组织的或目的明确的名称,不要使用表现形式的名称
- 基于最近的父class或基本class作为新class的前缀
- 使用.js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。
- 选择器
- 对于通用元素使用class,这样利于渲染性能的优化
- 对于经常出现的组件,避免使用属性选择器;浏览器的性能会受到这些因素的影响
- 选择器要尽可能短,并且尽量限制组成选择器的元素个数,建议不超过3个
- 只有在必要的时候才将class限制在最近的父元素内(后代选择器)
垂直居中有几种实现方式，给出代码范例
- 设置上下padding相等,适用于容器高度不限制的情况代码
- 绝对定位,适用于弹窗 代码
- 当弹窗宽高不固定时绝对定位法(translate相对于自身移动) 代码
- vertical-align居中;vertical-align作用于行内元素和表格 代码
- tables-cell实现居中,改变了display的表现方式代码
网友评论