前端编码规范

命名规范

html+css

1. 命名要具备语义的单词，不要用拼音，数字，符号 例如：wrap,title,container,content 错误：a1,bb
2. 命名若有多个单词，可以使用_(下划线) -(中划线) 连接单词，不要直接单词拼接或者驼峰命名，书写风格要统一，不要_ - 一起使用。

例如：header_nav, content_left,side_bar

错误：headernav,sideBar

3. 命名最好要适当的缩写，单词层级最多3层

例如：head_title_icon
错误：head_title_left_icon

img标签

为图片设置width,height(宽高)属性，就可以在页面加载时为图片预留空间。若没有这两个属性，浏览器在加载图片时不知道图片的尺寸，无法预留合适的空间。当图片加载时页面布局就会发生变化。 img标签四要素：width，height，src,alt width，height的值可以只是数字，不加单位。 alt在图片无法加载时显示图片描述文字，让用户了解这张图是做什么的；便于搜索引擎了解图片的内容；

例如: <img src="xxx/xx/a.png" widht="200" height="200" alt="喵咪" />

错误<img src="xxx/xx/a.png" widht="200px" height="200px" />

css书写规范

前端工程师必须要遵守的的css规范
1. 位置属性：position,float,display,overflow等可以决定元素渲染位置或层级的属性，或能够影响其他元素渲染位置或层级的属性
2. 自身属性：width,height,margin,padding,border,background等可以影响盒子自身展示的属性
3. 文本属性：font-类型，text-类型，word-类型 等作用于文本的样式属性
4. css3新增属性：transform,transition,box-shadow等属性

原理

1.浏览器解析HTML文档，构建DOM树(不包含隐藏的元素)，是从上至下(从左到右)单行解析的。若编写的顺序不符合规范，如先解析了width，height则解析时会从默认位置（单位文档流左上角）进行渲染
2.后续解析到了位置属性，浏览器需要擦除之前渲染好的dom结构，重新根据左上角位置和层级再次重绘，这样会导致浏览器重复渲染同一个元素，造成重绘或重排，消耗性能
例如：`div{
        float：left;   
        width: 200px;
        font-size: 16px;
        }`
错误：`div{
        font-size: 16px;
        width: 200px;
        float：left;   
        } `

• 属性值为0的，不需要加单位* div{ margin:0; border: 1px solid #ccc; }

• 属性值为0.x的可以省略0 * .title{ opacity: .5; }

• HEX颜色属性值符合AABBCC格式的要缩写为ABC* div{ color: #f90; //HEX: ff9900 }